我正在使用(优秀的)D3.js来生成一些图,但我找不到一种方法来删除x和y轴上的结束标记。
以y轴为例。
当结束刻度值与标签重合时,我可以拥有它。
但当最后一个舍入标签位于图的末尾下方时,我会得到两个刻度,一个用于最后一个舍入标签,另一个位于其上方y轴的末尾。
我不想看到这个结束记号,因为我发现它出现的时间比标签之间的规则间隔短会分散注意力。
这里有一个我所描述的例子,0
和15
处的分笔成交点是结束分笔成交点:
15 ─┐
|
10 _|
|
5 _|
|
0 ─┤──────
有什么建议吗?
附言:作为回应,我可以显式设置刻度。但我喜欢隐式生成刻度的便利性,只是不希望未标记的刻度污染轴。因此,理想的解决方案(如果存在)也会考虑到这一点。
9条答案
按热度按时间zdwk9cvp1#
如果您想从轴上删除两个端点记号,那么您可以使用以下方法:
将其添加到您进行的任何轴调用中,例如:
a11xaf1n2#
axis.tick*
函数可以帮助你解决这个问题。你有很多方法可以防止你所描述的行为。你可以使用tickValues()
函数显式地设置刻度。或者你可以使用tickSize()
将结束刻度的大小设置为0。你也可以使用ticks()
函数控制基本刻度。根据您的特定情况,其中一个选项可能比其他选项更有意义。
igsr9ssn3#
在d3.js v4.x中使用
.tickSizeOuter(0)
,例如:请注意,下面的零刻度被视为内部刻度
此d3.js v4文档:https://github.com/d3/d3-axis
mec1mxoz4#
如果您只想隐藏边界值并保留中间的隐式行为,则可以在绘制
SVG
轴对象后立即对其进行修改比如说,在这里绘制/更新坐标轴:
现在g将包含
.tick
类对象。它们中的每一个都将引用一个tick值。您可以选择它们并设置可见性属性:或者,您可以通过值
d
或索引i
来寻址任何特定分笔成交点但是要小心
.remove()
。有时第一个值已经被删除了,它在更新时删除了第二个值。隐藏的可见性更可靠。km0tfn4u5#
使用类似以下的方法移除结束记号:音符刻度大小(内部、外部)
如果在tickSize(inner,outer)中将外部参数设置为0,则不会获得外部刻度。
vlf7wbxs6#
我不确定,外部刻度大小与轴的第一个或最后一个刻度有什么关系。
tickSize
实际上控制tick组中<line>
元素的长度。因此,它处理tick的<text>
元素与轴之间的距离或从tick位置开始的辅助线的长度,这取决于轴的方向和它被移动到的位置(通过csstranslate()
)。以下是价格点组的外观:
现在你可以用
tickSize
方法控制<line>
元素的x2
和y2
属性。这里我用tickSize(15, 0)
和orientation('top')
表示x轴,它已经被移到了图表的底部。因此,刻度的标签以一种相当混乱的方式投影到图表中。3hvapo4f7#
D3 v5.9.2的工作溶液:
1.在声明
yAxis
并设置属性之后,将其 Package 在g
中并调用它:1.从轴组中删除第一个
<path>
元素:hwamh0ep8#
这将删除整个轴。这没有回答所张贴的问题。
agyaoht79#
只需删除两个轴: