创建没有刻度标签的D3轴

Question

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

这是一个展示我所追求的东西的例子,来自Mike Bostock.有几个Axis对象围绕中心旋转,只有第一个具有刻度标签.

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

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

然而,这仍然导致在textDOM中创建SVG 元素.有没有办法完全避免他们这一代？

Answer 1

我只想把它放在这里,因为人们很可能会在这个问题上结束.以下是您可以轻松操作D3轴的不同方法.

• 没有任何刻度或刻度标签:

  d3.svg.axis().tickValues([]);
  

  否line或text以这种方式创建元素.

• 没有刻度和刻度标签:

  d3.svg.axis().tickSize(0);
  

  该line元素仍然创造了这个方式.

  例如,您可以增加刻度标签和轴之间的距离.tickPadding(10).

• 使用刻度线和没有刻度标签:

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

  该text元素仍然创造了这个方式.

Answer 2

如果text不修改源代码,就无法避免生成元素.但是,您可以在生成这些元素后删除它们:

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

总的来说,这可能是最灵活的方法,因为您也可以选择性地删除标签.您可以从您正在使用的比例(通过调用scale.ticks())获取用于生成它们的数据,这将允许您轻松执行诸如删除所有奇数标签之类的操作.