javascript - 使用过渡动画时数据系列的 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);
线
.select('.line')
.attr('d', d => lines(d.values))
.call(transition);