Javascript D3使用转换动画时数据系列的渲染不完整

嗨，当尝试在一个新的线图（数据）系列中制作动画时，由于某些国家的原因，我得到了一条不完整的线

要了解我的意思，请访问以下内容，并选择“瑞典”作为示例，该图形会重新绘制，但并非所有线条都达到x轴的长度。但是，如果您刷新页面（在浏览器中启用了本地存储），您应该会看到图形是完整的

我看到：

我期望看到的内容以及重新加载图表时看到的内容：

---

请告知我正在使用D3V5，我是D3新手。提前谢谢

问题似乎出在

行程dasharray

上。如果观察每行的svg路径，可以看到

storke dasharray

属性计算不正确。

storke dasharray

长度是为第一个国家/地区计算的，其余选定国家/地区的长度保持不变。您可能知道，

storke dasharray

用于定义形状的图案和间隙。我可以想出两种方法：

• 您可以删除

  stroke dasharray

  转换函数，但 也将删除初始动画
• 重新计算每个选定国家/地区的

  行程数组
  长度：
  
  const t=d3.transition（）.持续时间（500）；
  const line=svg.selectAll（'.commodities'）.data（commodities）；
  线
  .选择（“.line”）
  .attr（'d'，d=>行（d.values））
  .呼叫（过渡）
  

---

您看过Javascript控制台吗

Error: <path> attribute d: Expected number, "M0,NaNL46.314431632…".
Error: <text> attribute transform: Trailing garbage, "translate(2410,NaN)".

---

过渡问题的一个可能解决方案是删除线条动画末尾的

stroke dasharray

属性

function tweenDash() {
    const l = this.getTotalLength();
    return d3.interpolateString("0," + l, l + "," + l);
}

function transition(path) {
    path.transition()
        .duration(2000)
        .attrTween("stroke-dasharray", tweenDash)
        .on("end", function () { d3.select(this).attr("stroke-dasharray", null); });
}

---

或者删除第一次转换结束时的

stroke dasharray

属性

function tweenDash() {
    const l = this.getTotalLength();
    return d3.interpolateString("0," + l, l + "," + l);
}

function transition(path) {
    path.transition()
        .duration(2000)
        .attrTween("stroke-dasharray", tweenDash)
        .on("end", function () { d3.select(this).attr("stroke-dasharray", null); });
}