D3.js 刻度线

Question

我正在尝试在 D3.js 中创建时间尺度。我有以下代码

time_scale = d3.time.scale()
        .range([0, chart_dimensions.width])
        .domain([d3.min(total_data, function(d) {return new Date('01/07/'+d.year)}),
                    d3.max(total_data, function(d) {return new Date('01/07/'+d.year)})]);

var time_axis = d3.svg.axis()
        .scale(time_scale);

我每年的日期范围从 Fri Jan 07 2000 00:00:00 GMT+0200 (South Africa Standard Time（当我运行函数 time_scale.invert(0) 时得到的输出）到 Tue Jan 07 2014 00:00:00 GMT+0200 (South Africa Standard Time)，基本上每年 15 个日期。轴绘制，但是它在绘制刻度时跳过了一年，即 2002,2004,2006,2008,2010,2012,2014... 当我更喜欢 2001,2002,2003,2004... 或 2002, 2004, 2006 年...但年份之间的刻度线表示中间年份。如何在 D3.js 中实现？

提前致谢，图迈尼

Answer 1

唯一可靠的方法是使用 .tickValues() function 并明确设置刻度位置。由于您有时间刻度，您可以使用便利函数 time_scale.ticks(d3.time.year, 1) 为您提供域中每年的刻度并将其传递给 .tickValues().

完成演示 here。

D3.js 刻度线

D3.js Scale Tick Marks

javascript

d3.js