从 D3.js 轴上删除尾号 [英] Remove end-ticks from D3.js axis

问题描述

我正在使用(优秀的)D3.js 来生成一些绘图，但我找不到从 x 和 y 轴上删除末端刻度的方法.

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.

以 y 轴为例.

当结束刻度值与标签一致时，我可以接受它.

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

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

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.

我不希望这个结尾标记可见，因为我发现它出现的时间少于标签之间的固定间隔这一事实会让人分心.

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

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

See here for an example of what I'm describing, the ticks at 0 and 15 are the end ticks:

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

有什么建议吗?

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

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.

推荐答案

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

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.

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

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

这篇关于从 D3.js 轴上删除尾号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！