D3.js v4 major＆amp;以y轴为零的次要刻度线作为居中基线

Question

我用D3.js v4获得了主要和次要刻度线。实现这一目标的例子非常少。

JS：

var yAxis = d3.axisLeft(y);
yAxis.scale(y).ticks(48).tickSizeInner(-width).tickSizeOuter(0).tickPadding(10);

// This may need to be done after a small timeout
d3.selectAll('.axis--y1 .tick').each(function(d, i) {  
   // every 4th is 'major' without .minor class
   d3.select(this).classed('minor', (i % 4 !== 0));
});

CSS：

.tick > line {
    stroke: #bbb;
    stroke-width: 1;
}
.tick.minor > line {
    stroke: #c9c9c9;
    stroke-width: 0.5;
}
.tick.minor > text {
    display: none;
}

问题是此数据集的变化范围为+/-，例如-1900到2300.

如何将零设置为基线并动态计算其他刻度线？如果不可能的话，这样的选择本来就很好......

Answer 1

基本上，这是不可能的，但需要动态axis.tickValues来动态计算刻度位置。实施细节可能因使用案例而异。