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

Question

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

以y轴为例.

当结束刻度值与标签重合时,我很乐意拥有它.

但是当最后一轮标签低于图的末尾时,我得到两个刻度,一个用于最后一个圆形标签,另一个在y轴末端高于它.

我不希望这个结尾标记可见,因为我发现它看起来比标签之间的常规inverval分散注意力.

请参阅此处以获取我所描述的示例:

http://www.road2stat.com/cn/wp-content/attachments/2012/04/d3_interactive.png

有小费吗？

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

Answer 1

对于任何想要解决这个问题的人,因为你要做的就是从轴上移除两个末端刻度,这样就可以了:

.outerTickSize(0)

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

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

Answer 2

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

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

Answer 3

如果您只想隐藏边界值并将隐式行为保留在中间,可以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 google网站上向Ian&Denis致谢https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

Answer 4

在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