Javascript 从 D3.js 轴中删除尾号

Remove end-ticks from D3.js axis

提问by Hejazzman

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.js 来生成一些图，但我找不到从 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

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.

PS 作为回应建议，我可以明确设置刻度。但是我喜欢隐式生成刻度的便利性，只是不希望未标记的刻度污染轴。因此，理想的解决方案（如果存在）也将考虑在内。

采纳答案by Lars Kotthoff

The axis.tick*functionscan 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.

这些axis.tick*功能可以帮助您。您有多种可能性可以阻止您所描述的行为。您可以使用该tickValues()函数显式设置刻度。或者，您可以使用 将结束刻度的大小设置为 0 tickSize()。您还可以使用该ticks()功能控制基础比例。

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

根据您的特定情况，这些选项之一可能比其他选项更有意义。

回答by Sisi

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)

回答by Angie

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

如果您只想隐藏边界值并将隐式行为保留在中间，则可以SVG在绘制后立即修改轴对象

Say, here you draw/update your axis:

说，在这里你绘制/更新你的轴：

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

Now g will contain .tickclassed 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 dor 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

感谢 d3-js 谷歌组的 Ian & Denis https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

回答by Jeremy Chone

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

回答by Supra

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

使用这样的方法删除结束刻度：注意 tickSize(inner, external)

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(inner, outer) 中将外部参数设置为 0，则不会获得外部刻度。

回答by BairDev

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

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

---

---

tickSizeactually 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 orthe 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实际上控制<line>刻度组内元素的长度。因此，它处理<text>刻度元素与轴之间的距离或从刻度位置开始的辅助线的长度，这取决于轴的方向和它已移动到的位置（通过 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 x2and the y2attribute of the <line>element with the tickSizemethod. 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.

现在您可以使用 方法控制元素的x2和y2属性。在这里，我使用和作为 x 轴，它已移至图表底部。所以刻度的标签以一种非常混乱的方式投射到图表中。<line>tickSizetickSize(15, 0)orientation('top')

回答by KiriSakow

Working solution for D3 v5.9.2:

D3 v5.9.2 的工作解决方案：

1. After you declared yAxisand set the attributes, wrap it in a gand callit:

   svg.append("g").attr("id", "yAxisG").call(yAxis);
   

2. Remove the first <path>element from the axis group:

   d3.select("g#yAxisG").select("path").remove();
   

1. 声明yAxis并设置属性后，将其包装在 a 中g并调用它：

   svg.append("g").attr("id", "yAxisG").call(yAxis);
   

2. <path>从轴组中删除第一个元素：

   d3.select("g#yAxisG").select("path").remove();
   

回答by md azhar sulaiman

Just remove both axis:

只需删除两个轴：

d3.selectAll('.axis').remove();