创建没有刻度标签的D3轴 [英] Create a D3 axis without tick labels

问题描述

如何创建没有任何内容的D3 axis 标签上有刻度线?

How can I create a D3 axis that does not have any labels at its tick markers?

这是一个示例，展示了我的追求，作者是Mike Bostock.有几个围绕中心旋转的Axis对象，只有第一个对象带有刻度标签.

Here's an example that shows what I'm after, from Mike Bostock no less. There are several Axis objects rotated around the centre, and only the first one has tick labels.

在这种情况下，他使用CSS隐藏了除了第一轴的标签之外的所有标签，从而获得了结果:

In this case, he's achieved the result using CSS to hide all but the first axis's labels:

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

但是，这仍然会导致在DOM中创建SVG text元素.有办法完全避免它们的产生吗?

However this still results in the creation of SVG text elements in the DOM. Is there a way to avoid their generation altogether?

推荐答案

由于人们可能会最终解决此问题，因此我将其保留在此处.以下是您轻松操作D3轴的各种方法.

I'm just going to leave this here since people are likely to end up on this question. Here are the different ways you can easily manipulate a D3 axis.

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

• Without any ticks or tick labels:

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

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

No line or text elements are created this way.

无刻度且带有刻度标签:

Without ticks and with tick labels:

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

line元素仍以这种方式创建.

The line elements are still created this way.

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

You can increase the distance between the tick labels and the axis with .tickPadding(10), for example.

带刻度和不带刻度标签的

With ticks and without tick labels:

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

text元素仍以这种方式创建.

The text elements are still created this way.

这篇关于创建没有刻度标签的D3轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！