在D3线图中隐藏刻度标签

18

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

是否有一种方法可以隐藏它们或更改它们的值?例如,我有一个折线图,其中刻度标签是间隔(1、2、3等),我想将它们更改为字符串(如'Jan', 'Feb', 'Mar', 'Apr'等)。这可能吗?

谢谢!

2个回答

24

您可以这样隐藏刻度格式:

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

但是当鼠标悬停在图表上时,.tickFormat('')会出现错误。 - Dinesh
对于d3 v4,你可以做类似的事情: d3.axisBottom(xScale).tickFormat((d) => '').tickSize(0) - Ron Sims II

7
是的,您可以生成不同格式的刻度。您可以在这里找到一些详细信息:https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickFormat。不幸的是,目前并没有记录所有格式的文档,因此您可能需要查看该方法的d3代码。如果您同时拥有x轴和y轴,则可以执行以下操作:
myGraph.yAxis.tickFormat(d3.format(',.2%'));

此外,您还可以查看Bob Monteverde的制表库:https://github.com/novus/nvd3(特别是在源代码文件夹中的轴组件),如果您想了解与轴组件和轴刻度格式相关的许多技巧。
另一方面,如果您不想显示刻度线,则可以创建一个没有刻度线的轴组件(尽管我没有尝试过这个方法),但是当您使用自定义格式化程序并且可以在刻度线上执行任何您想要的操作时,我认为这样做没有意义。
最好的问候!

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接