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

Question

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

以y轴为例。

当结束刻度值与标签重合时，我很乐意使用它。

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

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

请参阅此处查看我所描述的示例：

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

任何提示？

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

Answer 1

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

.outerTickSize(0)

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

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

Answer 2

axis.tick* functions可以帮到你。您有许多可能性来阻止您描述的行为。您可以使用tickValues()函数明确设置滴答。或者您可以使用tickSize()将结束标记的大小设置为0。您还可以使用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()。有时第一个值已被删除，它会在更新时删除第二个值。隐藏的可见性更可靠。

归功于Ian＆amp; Denis at d3-js google group https://groups.google.com/forum/#!topic/d3-js/LBxR_finiME

Answer 4

使用以下内容删除结尾标记：note tickSize（inner，outer）

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

如果你在tickSize（内部，外部）中将外部参数设置为0，则不会得到外部刻度。

Answer 5

在d3.js v4.x中使用.tickSizeOuter（0），如

add_action( 'wp_trash_post', 'delete_post_permanently' );

function delete_post_permanently( $post_id ){    
    wp_delete_post($post_id, true); // deletes post
    //wp_delete_attachment ( $post_id, true ); // deletes attachment
    if( has_post_thumbnail( $post_id ) )
    {
        $attachment_id = get_post_thumbnail_id( $post_id );
        wp_delete_attachment($attachment_id, true);
    }
}

请注意，下面的零刻度被认为是

的内部

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

Answer 6

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

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

这是一个tick组的样子：

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

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

Answer 7

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

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

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

2. 删除是轴组中的第一个<path>元素：

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

Answer 8

只需移除两个轴：

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