从 D3.js 轴中删除结束标记

Posted 2023-02-22

【中文标题】从 D3.js 轴中删除结束标记

【英文标题】：Remove end-ticks from D3.js axis

【发布时间】：2012-11-20 02:12:07

【问题描述】：

我正在使用（优秀的）D3.js 来生成一些绘图，但我找不到从 x 和 y 轴移除结束刻度的方法。

以y轴为例。

当结束刻度值与标签一致时，我可以拥有它。

但是当最后一个圆形标签低于绘图末端时，我会得到两个刻度，一个用于最后一个圆形标签，一个位于 y 轴末端的上方。

我不希望这个结束标记可见，因为我发现它出现的时间少于标签之间的常规间隔会分散注意力。

请参阅此处了解我所描述的示例，0 和 15 处的刻度是结束刻度：

15 ─┐ 
    | 
10 _| 
    |
5  _|
    |
0  ─┤──────

有什么建议吗？

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

【问题讨论】：

D3 v5.9.2 的工作解决方案： (1) 将yAxis 包裹在g 中并调用它：svg.append("g").attr("id", "yAxisG").call(yAxis)； (2) Remove 是轴组中的第一个<path> 元素：d3.select("g#yAxisG").select("path").remove();

【参考方案1】：

对于任何遇到此问题的人，因为您想要做的就是从轴上删除两个末端刻度，这将解决问题：

.outerTickSize(0)

将其添加到您进行的任何轴调用中，例如：

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

【讨论】：

对于新的modular d3-axis，使用tickSizeOuter()。

来自文档：“外部刻度”实际上并不是刻度，而是域路径的一部分，它们的位置由相关比例的域范围确定。因此，外部刻度可能与第一个或最后一个内部刻度重叠。外部刻度大小为 0 会抑制域路径的方形末端，而是生成一条直线。

【参考方案2】：

axis.tick* functions 可以为您提供帮助。您有多种可能性来阻止您所描述的行为。您可以使用 tickValues() 函数显式设置刻度。或者，您可以使用tickSize() 将结束刻度的大小设置为 0。您还可以使用ticks() 函数控制底层规模。

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

【讨论】：

谢谢，但我应该澄清一下，我也想要隐式滴答行为（如果可能的话），而不是明确设置它们只是为了绕过结束滴答问题。

那就看看tickSize()吧。

要仅删除轴末端的刻度，请使用axis.tickSizeOuter(0)（d3 4.x 版）或axis.outerTickSize(0)（d3 3.x 版）。

【参考方案3】：

在 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

请注意，下面的零勾号被认为是内部的

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

【参考方案4】：

如果你只想隐藏边界值并保持中间的隐式行为，你可以在绘制之后修改轴SVG对象

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

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

现在 g 将包含 .tick 分类对象。它们中的每一个都将引用一个刻度值。您可以选择它们并设置可见性属性：

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

或者，您可以通过其值d 或索引i 来处理任何特定的报价

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

不过要小心.remove()。有时第一个值已经被删除，它会在更新时删除第二个值。可见性隐藏更可靠。

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

【参考方案5】：

使用以下方式删除结束刻度：note tickSize(inner, outer)

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

如果你在 tickSize(inner, outer) 中将外部参数设置为 0，你将不会得到外部刻度。

【参考方案6】：

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

---

tickSize 实际上控制刻度组内<line> 元素的长度。因此，它处理刻度线的<text> 元素与轴之间的距离或从刻度线位置开始的辅助线的长度，这取决于轴的方向及其所在的位置移至（通过 css translate()）。

这是一个刻度组的样子：

<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>

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

【参考方案7】：

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

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

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

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

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

【参考方案8】：

只需删除两个轴：

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