d3js轴日期仅为开始和结束值

Bja*_*rte 4 javascript charts svg canvas d3.js

解决:

谢谢,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]);
Run Code Online (Sandbox Code Playgroud)

问题:

所以我有一个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);
Run Code Online (Sandbox Code Playgroud)

Lar*_*off 6

尝试使用ticks()函数调整滴答数,或者如果不能产生所需的结果,请尝试使用明确设置滴答值tickValues().

  • [extent ticks](http://bl.ocks.org/2996785)示例在这里特别相关. (4认同)