D3.js v4主要和次要刻度線，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 。 實施細節可能因不同的用例而異。