Javascript 从D3.js轴上删除结束标记

我正在使用（优秀的）D3.js生成一些绘图，但我找不到从x轴和y轴删除端点标记的方法

以y轴为例

当结束刻度值与标签重合时，我可以使用它

但当最后一个圆形标签位于绘图末端下方时，我会得到两个记号，一个用于最后一个圆形标签，另一个位于y轴末端的上方

我不想让这个尾端记号可见，因为我发现它出现在标签之间的不规则倒钩的事实让人分心

请参见此处，了解我所描述的示例：

有什么建议吗

另外，作为回应，我可以明确地设置刻度。但是我喜欢隐式生成记号的便利性，只是不希望未标记记号污染轴。因此，理想的解决方案（如果存在）也将考虑在内。

在这方面可以帮助您。你有很多可能阻止你所描述的行为。您可以使用

tickValues（）

函数显式设置刻度。或者可以使用

tickSize（）

将结束记号的大小设置为0。您还可以使用

ticks（）

函数控制基础比例

---

根据您的特定场景，这些选项中的一个可能比其他选项更有意义。

< P>如果您想隐藏边界值并将隐含行为保持在中间，则可以在绘制

后修改轴<代码> SVG < /代码>对象。 例如，在这里绘制/更新轴：

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

现在g将包含

。勾选
分类对象。它们中的每一个都将引用一个刻度值。可以选择它们并设置可见性属性：

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谷歌集团的伊恩和丹尼斯使用如下方法去除末端记号：注意tickSize（内部、外部）

如果在tickSize（内部、外部）中将outer param设置为0，则不会得到外部刻度。
对于任何回答此问题的人，因为您只想从轴上删除两端刻度，这将完成以下操作：

.outerTickSize(0)

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

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

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


tickSize
实际上控制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>


0

现在，您可以使用
tickSize
方法控制
元素的
x2
和
y2
属性。这里我使用的是x轴的
tickSize（15,0）
和
orientation（'top'）
，它已经移动到图表的底部。因此，刻度的标签以一种相当混乱的方式投射到图表中

请注意，下面的零刻度被认为是一个innger on


此d3.js v4文档：
只需删除两个轴：

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

D3 v5.9.2的工作解决方案：
声明
yAxis
并设置属性后，将其包装在
g
中并调用它：

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


从轴组中删除第一个
元素：

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


谢谢，但我可能需要澄清的是，我还需要隐式勾号行为（如果可能的话），而不是显式设置它们只是为了绕过结束勾号问题。然后看看
tickSize（）
。要仅删除轴末端的勾号，请使用
axis.ticksizeout（0）
（d3版本4.x）或
axis.outerTickSize（0）
（d3版本3.x）。在新版本中，使用
ticksizeout（）
。d3 v5.9.2的工作解决方案：（1）将
yAxis
包装在
g
中，并调用它：
svg.append（“g”）.attr（“id”，“yAxisG”）.call（yAxis）
；（2） Remove是axis组中的第一个元素：
d3。选择（“g#yAxisG”）。选择（“路径”）。Remove（）
 svg.append("g").attr("id", "yAxisG").call(yAxis);

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