Question

如何创建在其刻度标记处没有任何标签的D3 axis？

Here's an example that shows what I'm after，来自Mike Bostock并没有减少。有几个Axis对象围绕中心旋转，只有第一个有刻度标签。

在这种情况下，他使用CSS实现了结果，以隐藏除第一个轴标签之外的所有标签：

.axis + .axis g text {
  display: none;
}

但是，这仍然会导致在DOM中创建SVG text元素。有没有办法完全避免他们这一代呢？

Answer 1

我要离开这里，因为人们可能最终会回答这个问题。以下是您可以轻松操纵D3轴的不同方法。

Answer 2

如果不修改源代码，就无法避免生成text元素。但是，您可以在生成这些元素后将其删除：

var axisElements = svg.append("g").call(axis);
axisElements.selectAll("text").remove();

总的来说，这可能是解决此问题的最灵活方式，因为您还可以选择性地删除标签。您可以从您正在使用的比例（通过调用scale.ticks()）获取用于生成它们的数据，这样您就可以轻松地执行删除所有奇数标记之类的操作。

Answer 3

创建没有刻度标签的D3轴

可以使用返回空字符串的函数来创建不带标签的刻度线。 D3的Javascript版本和Typescript版本都可以使用。

d3.svg.axis().tickFormat(() => "");