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

【问题标题】：Create a D3 axis without tick labels创建一个没有刻度标签的 D3 轴
【发布时间】：2013-11-16 06:20:25
【问题描述】：

如何创建一个在其刻度标记处没有任何标签的 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 元素。有没有办法完全避免他们这一代？

【问题讨论】：

标签： d3.js label

【解决方案1】：

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

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

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

【讨论】：

那是因为tickFormat 的类型错误（应该修复）。 d3.svg.axis().tickFormat("" as any); 会工作
@Ashitaka - 但这在 JavaScript 环境中不起作用，而 () => "" 在两者中都起作用。
@Ashitaka - 另外，如果您认为“tickFormat 是错误的（应该修复）”，为什么不在 d3 轴 GitHub 页面 (github.com/d3/d3-axis/issues) 上为 @Mbostock 打开一个问题审核？
我不认为这是错误的。我知道这是错误的。问题不在于 d3 轴。 d3-axis（和所有其他 d3 库）是用 JS 编写的，而不是 TS。问题在于您用于提供 d3 类型的依赖项。
@Ashitaka - 所以如果你知道这是错误的，为什么不报告这个问题呢？我相信人们使用的常用包是npm i @types/d3-axis，您可以在GitHub页面上报告问题（github.com/DefinitelyTyped/DefinitelyTyped/issues）

【解决方案2】：

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

【讨论】：

使用较新的（打字稿）API，它将类似于d3.axisBottom().tickFormat((domainn,number)=>{return ""});
错了。唯一需要更改（由于 D3v4，而不是 typescript）是 d3.svg.axis.orient("bottom") 到 d3.axisBottom()。 tickFormat 像往常一样接受字符串。
@Ashitaka - 我相信@Himanshu 是正确的。当 tickFormat 被传递一个字符串而不是一个函数时，Typescript 对我抛出一个错误
您知道一个完整的工作示例吗？当我将此代码添加到我的 d3 脚本时，我得到 TypeError: svg.axis is not a function。
同样，我在尝试使用 tickFormat("") 时遇到错误 - tickFormat((d)=>"") 在 typescript 中确实有效。

【解决方案3】：

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

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

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

【讨论】：