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

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

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

我所看到的：


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


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

最佳答案

问题似乎出在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);