从D3.js轴移除结束刻度

arknldoa  于 2022-11-12  发布在  其他
关注(0)|答案(9)|浏览(219)

我正在使用(优秀的)D3.js来生成一些图,但我找不到一种方法来删除x和y轴上的结束标记。
以y轴为例。
当结束刻度值与标签重合时,我可以拥有它。
但当最后一个舍入标签位于图的末尾下方时,我会得到两个刻度,一个用于最后一个舍入标签,另一个位于其上方y轴的末尾。
我不想看到这个结束记号,因为我发现它出现的时间比标签之间的规则间隔短会分散注意力。
这里有一个我所描述的例子,015处的分笔成交点是结束分笔成交点:

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

有什么建议吗?
附言:作为回应,我可以显式设置刻度。但我喜欢隐式生成刻度的便利性,只是不希望未标记的刻度污染轴。因此,理想的解决方案(如果存在)也会考虑到这一点。

zdwk9cvp

zdwk9cvp1#

如果您想从轴上删除两个端点记号,那么您可以使用以下方法:

.outerTickSize(0)

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

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

a11xaf1n2#

axis.tick*函数可以帮助你解决这个问题。你有很多方法可以防止你所描述的行为。你可以使用tickValues()函数显式地设置刻度。或者你可以使用tickSize()将结束刻度的大小设置为0。你也可以使用ticks()函数控制基本刻度。
根据您的特定情况,其中一个选项可能比其他选项更有意义。

igsr9ssn

igsr9ssn3#

在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

mec1mxoz

mec1mxoz4#

如果您只想隐藏边界值并保留中间的隐式行为,则可以在绘制SVG轴对象后立即对其进行修改
比如说,在这里绘制/更新坐标轴:

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

现在g将包含.tick类对象。它们中的每一个都将引用一个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的谷歌组。*
km0tfn4u

km0tfn4u5#

使用类似以下的方法移除结束记号:音符刻度大小(内部、外部)

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

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

vlf7wbxs

vlf7wbxs6#

我不确定,外部刻度大小与轴的第一个或最后一个刻度有什么关系。
tickSize实际上控制tick组中<line>元素的长度。因此,它处理tick的<text>元素与轴之间的距离从tick位置开始的辅助线的长度,这取决于轴的方向和它被移动到的位置(通过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>元素的x2y2属性。这里我用tickSize(15, 0)orientation('top')表示x轴,它已经被移到了图表的底部。因此,刻度的标签以一种相当混乱的方式投影到图表中。

3hvapo4f

3hvapo4f7#

D3 v5.9.2的工作溶液:

1.在声明yAxis并设置属性之后,将其 Package 在g中并调用它:

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

1.从轴组中删除第一个<path>元素:

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

hwamh0ep8#

这将删除整个轴。这没有回答所张贴的问题。

agyaoht7

agyaoht79#

只需删除两个轴:

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

相关问题