使用过渡动画时，D3数据序列的渲染不完整

Question

您好，由于某些国家/地区的某些原因，尝试为新的折线图（数据）系列制作动画以替换现有的折线图（数据）系列时，我得到的线条不完整。

要了解我的意思，请访问以下内容并选择例如“瑞典” https://bl.ocks.org/angusgrant/raw/8599b573d600539f192d9c5709bc1e6e/6bb1a4f028a231fcc84f8fd9dc2f05d3c3365cd6/，该图将重绘，但并非所有线条都达到x轴的长度。但是，如果刷新页面（在浏览器中启用了本地存储），则应该看到图形是完整的。

我看到的是：

我希望看到的以及重新加载图形后看到的内容：

请告知我正在使用D3 v5，但我是D3的新手。提前致谢。

Answer 1

问题似乎出在stroke-dasharray上。如果您观察每行的svg路径，则可以看到storke-dasharray属性未正确计算。 storke-dasharray的长度是针对第一个国家/地区计算的，其余国家/地区则保持不变。如您所知，storke-dasharray用于定义形状的图案和间隙。我可以想到两种方法：

• 您可以删除stroke-dasharray过渡功能，但是 还将删除初始动画。

• 为每个所选国家/地区重新计算stroke-dasharray的长度：

  const t = d3.transition().duration(500); const line = svg.selectAll('.commodities').data(commodities); line .select('.line') .attr('d', d => lines(d.values)) .call(transition);

Answer 2

您曾经看过Javascript控制台

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

在此图表的path中查找，它与Other数据线有关。它从不可见。原因

    {description: 'Other', kpppd: +d["Other(FAO (2017)) (kilocalories per person per day)"]},
    // column name:                   Other (FAO (2017)) (kilocalories per person per day)

---

过渡问题的一种可能解决方案是在行动画的末尾删除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); });
}