d3.js - D3 tickSizeOuter(0) 删除不工作的结束标记

Question

我正在按照示例 here删除我的条形图中的结束刻度，如下所示:

var yAxis = d3.axisLeft(yScale); 
yAxis.tickValues([0, 500, 1000, 1500, 2000, 2500]); 
yAxis.tickSizeOuter(0); // <--- This does not remove the end ticks

但是，这不会删除 y 轴上的结束刻度。

现在，当我输入这行代码时:

yAxis.tickSize(0);

我能够删除 y 轴上的所有刻度。

为什么 tickSizeOuter(0) 代码不工作，我怎样才能只删除结束标记？

这是我在 Angular 项目中使用的 d3 版本:

"d3": "^5.9.1"

Answer 1

yAxis.tickSizeOuter(0) 移除外部刻度，这意味着 y 线是直线，但它不会移除实际刻度(例如 0-)。如果你是什么，你应该使用类似的东西:

  const tick_count = d3.selectAll("g.axis.axis--y .tick").size();
  d3.selectAll("g.axis.axis--y .tick")
    .each(function (d, i) {
      console.log(d,i)
      if ( i == 0 || i == tick_count-1) {
        this.remove();
      }
    });

希望我理解正确你的误解:)