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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14708802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 22:22:10  来源:igfitidea点击:

d3js axis dates start and end value only

javascriptcanvassvgchartsd3.js

提问by Bjarte

Resolved:

解决:

Thanks, the tickValues gave me the wanted result. I used the values from d3.min and d3.max:

谢谢,tickValues 给了我想要的结果。我使用了 d3.min 和 d3.max 中的值:

Result

结果

    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]);

Problem:

问题:

So I have a D3js multi-series line chart.

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

Chart

Chart

The X axis is bottom and is time (the range of this depends on the user selection, can be few days, weeks, months or years even). The Y axis is value and is decimal.

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

What I have problem with is that the labels on the axis is overlapping and it's looking rather poorly.

我的问题是轴上的标签重叠并且看起来很糟糕。

So my question is if there is a way to show only the first date on the axis and the last date?

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

I have based the chart on this one: http://bl.ocks.org/3884955

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

My code for x-axis:

我的 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);

回答by Lars Kotthoff

Try adjusting the number of ticks with the ticks()functionor, if that doesn't produce the desired result, try setting the tick values explicitly with tickValues().

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