5

解决：

谢谢，tickValues 给了我想要的结果。我使用了 d3.min 和 d3.max 的值：

结果

    var xMin = d3.min(groups, function(c) { return d3.min(c.values, function(v) { return v.date; }); });
    var xMax = d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); });

    x.domain([xMin,xMax]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%y-%m-%d'))
            .orient("bottom")
            .tickValues([xMin, xMax]);

问题：

所以我有一个 D3js 多系列折线图。

图表

X 轴是底部，是时间（其范围取决于用户选择，可以是几天、几周、几个月甚至几年）。Y 轴是数值并且是十进制的。

我遇到的问题是轴上的标签是重叠的，而且看起来很差。

所以我的问题是，是否有办法只显示轴上的第一个日期和最后一个日期？

我的图表基于这个： http ://bl.ocks.org/3884955

我的 x 轴代码：

    var x = d3.time.scale().range([0, dimensions.width]);

    x.domain([
        d3.min(groups, function (c) { return d3.min(c.values, function (v) { return v.date; }); }),
        d3.max(groups, function (c) { return d3.max(c.values, function (v) { return v.date; }); })
    ]);

        var xAxis = d3.svg.axis()
            .scale(x)
            .tickFormat(d3.time.format('%a %d'))
            .orient("bottom")
            .ticks(5);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + dimensions.height + ")")
            .call(xAxis);
4

1 回答 1

7

尝试使用该ticks()函数调整刻度数，或者，如果这不能产生所需的结果，请尝试使用 显式设置刻度值tickValues()。

于 2013-02-05T13:48:39.043 回答