在折线图上隐藏 D3 中的刻度标签答案

【问题标题】：Hide Tick Labels in D3 on Line Graph在折线图上隐藏 D3 中的刻度标签
【发布时间】：2012-06-10 17:53:23
【问题描述】：

我是 D3 的新手，我有一个关于使用 D3 制作的折线图上的刻度标签的快速问题。我正在使用 d3.svg.axis.scale().tickSize().tickSubdivide() 来生成我的刻度线。

有没有办法隐藏它们或改变它们的值？例如，我有一个折线图，其中刻度标签是间隔（1、2、3 等），我想将它们更改为字符串，例如 ('Jan', 'Feb', 'Mar', 'Apr '，等等）。这可能吗？

谢谢！

【问题讨论】：

【解决方案1】：

您可以像这样隐藏刻度格式：

myGraph.yAxis.tickFormat(function (d) { return ''; });

【讨论】：

但是当鼠标悬停在图表上时.tickFormat('')会报错
对于 d3 v4 你可以做类似的事情：d3.axisBottom(xScale).tickFormat((d) => '').tickSize(0)

【解决方案2】：

是的，可以为您的报价生成不同的格式。您可以在此处找到一些详细信息：https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat。不幸的是，目前并非所有格式都记录在案，因此您可能需要查看该方法的 d3 代码。如果您同时拥有 xAxis 和 yAxis，则可以执行以下操作：

myGraph.yAxis.tickFormat(d3.format(',.2%'));

如果您想了解与轴组件和轴刻度格式相关的许多技巧，还可以查看 Bob Monteverde 的图表库：https://github.com/novus/nvd3（尤其是在源文件夹中的轴组件处）。

另一方面，如果您不希望显示刻度，那么我想您可以创建一个没有刻度的轴组件（我没有尝试过，很难），但我看不出这样做的意义你有自定义格式化程序，你几乎可以用刻度做任何你想做的事情。

最好的问候！

【讨论】：