删除end-ticks D3。js轴

I'm using (the excellent) D3.js to generate some plots, and I can't find a way to remove the end ticks from the x and y axis.

我在用(优秀的)D3。为了生成一些绘图，我无法找到从x轴和y轴上删除末端滴答的方法。

Take the y-axis for example.

以y轴为例。

When the end tick value coincides with a label, I'm ok with having it.

当结束标记值与标签一致时，我可以接受它。

But when the last round label is below the end of the plot, I get two ticks, one for the last rounded label and one above it at the end of the y-axis.

但是当最后一轮的标签在图的下方时，我得到两个刻度，一个是最后的圆形标签，另一个在y轴的顶端。

I don't want this end-tick visible, because I find the fact that it appears in less than the regular inverval between labels distracting.

我不希望这个末端标记显示出来，因为我发现它比标签之间的正则逆变项更容易分散注意力。

See here for an example of what I'm describing:

这里是我描述的一个例子:

http://www.road2stat.com/cn/wp-content/attachments/2012/04/d3_interactive.png

Any tips?

任何建议吗?

P.S As a response suggested, I could set the ticks explicitly. But I like the convenience of the implicit generated ticks, just don't want unlabelled ticks to pollute the axis. So an ideal solution (if exists) would also take than into account.

P。作为回应，我可以明确地设置刻度。但是我喜欢隐式生成的蜱虫的便利，只是不希望没有标签的蜱虫污染轴心。因此，一个理想的解决方案(如果存在的话)也要考虑进去。

6 个解决方案

#1

The axis.tick* functions can help you there. You have a number of possibilities to prevent the behaviour you're describing. You could set the ticks explicitly using the tickValues() function. Or you could set the size of the end ticks to 0 using tickSize(). You can also control the underlying scale using the ticks() function.

轴。tick* function可以帮助您实现这一点。你有很多可能性来阻止你描述的行为。您可以使用tickValues()函数显式地设置节拍。或者可以使用tickSize()将末端刻度设置为0。您还可以使用tick()函数来控制底层的比例。

Depending on your particular scenario, one of these options may make more sense than the others.

根据您的特定场景，其中一个选项可能比其他选项更有意义。

#2

For anyone who got to this question because all you want to do is remove the two end ticks from an axis, this will do the trick:

对于任何遇到这个问题的人来说，因为你想要做的就是从一个轴上移除两个端点的滴答声，这将会达到目的:

.outerTickSize(0)

Add that to any axis call you make, such as:

将其添加到您调用的任何轴上，例如:

d3.svg.axis().outerTickSize(0)

#3

If you want to just hide the bounding values and keep the implicit behavior in the middle, you can modify the axis SVG object just after you draw it

如果您只想隐藏边界值，并将隐式行为保存在中间，那么您可以在绘制后修改axis SVG对象

Say, here you draw/update your axis:

说，这里你画/更新你的轴:

g.selectAll(".x.axis").call(xAxis);

Now g will contain .tick classed objects. each of them will refer to one tick value. You can select them and set visibility attribute:

现在g将包含.tick类对象。它们中的每一个都指向一个蜱的值。您可以选择它们并设置可见性属性:

d3.select(g.selectAll(".tick")[0][0]).attr("visibility","hidden");

Alternatively, you can address any specific tick by its value d or index i

或者，您可以通过它的值d或索引i来处理任何特定的蜱虫

g.selectAll(".tick")
    .each(function (d, i) {
        if ( d == 0 ) {
            this.remove();
        }
    });

Be careful with .remove() though. Sometimes the first value is removed already and it removes the second value on update. Visibility hidden is more reliable.

注意.remove()。有时第一个值已经被删除，它将在更新时删除第二个值。可见性隐藏更可靠。

credit to Ian & Denis at d3-js google group https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

感谢Ian & Denis在d3-js谷歌组提供的信息:https://groups.google.com/forum/#

#4

Remove end ticks using something like this: note tickSize(inner, outer)

使用以下方法删除结束标记:注意tickSize(内部、外部)

var xAxis = d3.svg.axis().scale(x).
                tickSize(3, 0).orient("bottom").tickFormat( ... );

If you put outer param to 0 in tickSize(inner, outer) you will not get the outer ticks.

如果在tickSize(内部、外部)中将外部参数设置为0，就不会得到外部节拍。

#5

In d3.js v4.x use .tickSizeOuter(0), like

在d3。js v4。x使用.tickSizeOuter(0)

self._leftAxis = d3.axisLeft(self._y)
      .tickSizeInner(3) // the inner ticks will be of size 3
      .tickSizeOuter(0); // the outer ones of 0 size

Note that the zero tick below is considered a innger on

注意，下面的零勾被认为是一个印槽

This d3.js v4 doc: https://github.com/d3/d3-axis

这d3。js v4文档:https://github.com/d3/d3-axis

#6

I'not sure, what the outer tick size has to do with the first or last tick of an axis.

我不确定，外部的刻度与第一个或最后一个轴的刻度有什么关系。

tickSize actually controls the length of the <line> element inside of the tick group. Therefore it deals with the distance between the <text> element of the tick and the axis or the length of helper lines starting at the tick positions, which depends on the orientation of the axis and where it has been moved to (via css translate()).

tickSize实际上控制了tick组中元素的长度。因此，它处理的是tick的元素与轴之间的距离，或者从滴答位置开始的辅助线的长度，这取决于轴的方向和它被移动到的位置(通过css translate())))。

This is how a tick group looks like:

这就是蜱群的样子:

<g transform="translate(10,0)" style="opacity: 1;" class="tick">
   <line x2="0" y2="-15"></line>
   <text x="0" y="-18" style="text-anchor: middle;" dy="0em">0.0</text>
</g>

Now you can control the x2 and the y2 attribute of the <line> element with the tickSize method. Here I'm using tickSize(15, 0) and orientation('top') for the x axis, which has been moved to the bottom of the chart. So the lables of the ticks project into the chart in a quite messy way.

现在可以使用tickSize方法控制元素的x2和y2属性。这里我使用了x轴的tickSize(15,0)和方向('top')，它已经移动到图表的底部。因此，蜱虫项目的标签以一种相当混乱的方式进入了图表。

#1