D3 tickSizeOuter(0)无法去除末端刻度。

Question

我正在按照这里的例子来移除条形图中的末尾刻度线，具体如下：

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"

- Kingamere

---

这是移除外层引号的标准方法。如果这对您不起作用，您应该设置一个可执行的演示来展示问题。 - altocumulus

如果您的域中的值为0和2500（即[0, 2500]），则没有末端刻度线。 - Gerardo Furtado

D3 v5.9.2的工作解决方案：（1）将yAxis包装在g中并调用它：svg.append("g").attr("id", "yAxisG").call(yAxis); （2）从组中删除第一个<path>元素：d3.select("g#yAxisG").select("path").remove(); - KiriSakow

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();
      }
    });

希望我正确理解了你的误解：最初的回答。

- donatso

Answer 2

D3 v5.9.2 的工作解决方案：

1. After you declared yAxis and set the attributes, wrap it in a g and call it:

   var yAxis = d3.axisLeft(yScale); 
   yAxis.tickValues([0, 500, 1000, 1500, 2000, 2500]);
   
   svg.append("g").attr("id", "yAxisG").call(yAxis);
   

2. Remove the first <path> element from the group:

   d3.select("g#yAxisG").select("path").remove();
   

- KiriSakow