Javascript d3.js图表中的错误行

我不知道为什么我在d3.js图表中有一些错误的行。我不确定这是否是一个编码问题，因为如果我尝试在Chrome上更改选项卡，然后返回图表的选项卡，错误的行就会消失

要理解问题所在并不容易，所有这些都需要添加一个图像来更好地解释

这是更新图表的javascript代码（我正在使用Vue.js）

编辑：如果单击页面中的其他组件，行也会消失

---

谢谢

我怀疑这可能是斜接的问题

当两条线段以锐角相交且已为笔划直线连接指定斜接时，斜接可能会延伸到笔划路径的直线的厚度之外。笔划斜接限制比率用于定义超出限制的时间，如果超出限制，则连接将从斜接转换为倒角。

虽然圆线连接不应引起问题，但当直线非常接近时，可能会出现一些计算错误

可以尝试斜接线连接，以防止线延伸

.style（“笔划线条连接”、“斜接”）
.样式（“斜接夹”、“1”）

好的，可能我解决了这个问题。我必须对图表做的另一件事是使其具有响应性，因此我使用了svg元素的viewBox。添加viewBox似乎解决了这个问题

我将添加代码，这样每个有相同问题的人都可以轻松地解决它

Javascript:

             this.svg = d3.select("#chart")
             .append("svg")
             .attr("viewBox", `0 0 800 420`);

<template>
      <div id="chart"></div>
</template>

HTML:

             this.svg = d3.select("#chart")
             .append("svg")
             .attr("viewBox", `0 0 800 420`);

<template>
      <div id="chart"></div>
</template>

---

谢谢你的回答

谢谢你的回答！我试图更改笔划线条连接，但没有任何更改。我用的正是你的密码。我认为问题可能与路径维度有关，因为当d3.js更新路径变量时，路径之外的所有内容（例如错误的行）都不会更新，因此可以看到额外的行@Danieli它是可以用开发工具检查的东西吗？只是铬的吗？