24

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

这是一个显示我所追求的示例，来自 Mike Bostock。有几个围绕中心旋转的 Axis 对象，只有第一个有刻度标签。

在这种情况下，他使用 CSS 来隐藏除第一个轴的标签以外的所有标签。

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

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

4

3 回答 3

80

我将把它留在这里，因为人们很可能最终会回答这个问题。以下是您可以轻松操纵 D3 轴的不同方法。

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

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

    没有line或text元素是以这种方式创建的。

  • 没有刻度和刻度标签：

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

    line元素仍然以这种方式创建。

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

  • 有刻度和没有刻度标签：

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

    text元素仍然以这种方式创建。

于 2014-11-11T11:26:12.280 回答
10

text不修改源就无法避免元素的生成。但是，您可以在生成这些元素后删除它们：

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

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

于 2013-11-05T15:16:51.893 回答
3

创建一个没有刻度标签的 D3 轴

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

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

在 github 上进一步解释@types/d3-axis https://github.com/DefinitelyTyped/DefinitelyTyped/pull/24716#issuecomment-381427458

于 2019-11-20T05:23:29.857 回答