Question

我正在开发一个可视化项目，其中一个组件是一个叠加在条形图上的折线图。我一次延迟了酒吧过渡。我希望这条线路能够进行类似的转换，因此线路上的每个点都会保持＆＃34;附加＆＃34;到酒吧。

这是该行的代码：

var line = d3.svg.line()
 .x(function(d, i) {
    return xScale(i) + 20;
 })
 .y(function(d) {
    return h - yScale(parseFloat(d.performance));
 });

svg1.append("svg:path").attr("d", line(dataset[0].months));

在这里我转换它：

svg1.select("path")
    .transition()
    .ease("linear")
    .duration(1000)
    .attr("d", line(dataset[count].months));

我已经看到了解决d3线路转换的其他问题，但似乎没有解决我的问题，所以我希望我不是转发器。提前谢谢！

注意：我确实尝试在转换后放入delay（）函数，但这并不起作用。我假设这是因为该行是一个<path>而不是多个<rect>元素......

Answer 1

所以这一段时间从我的雷达上掉了下来，但是前几天我有一些时间找到了延迟过渡的一种方法......

这是我写的pen。我generated一些随机数据并创建了一个简单的折线图来显示股票价格。这里的技巧不是使用转换迭代选择的元素，而是迭代遍历数据集，逐点更新它并在我们前进时转换行：

dataset.forEach(function(item, index) {
  let set = dataset.slice();

  // Update the current point in the copy
  set[index].price = newPrice();

  stock_line.transition()
            .delay(index * 500)
            .attr('d', line_generator(set));
});

不可否认，这有点过时，可能有点过分，你可以立即更新整行。 @Lars也提到了使用stroke-dashoffset技巧来实现这一目的的可能性。我已经玩过这种方法来动画drawing the line，但我不确定如何使用它来完成pen中显示的相同延迟动画。如果实施不那么糟糕，请告诉我，我会更新这个答案。

使用D3，我如何一次转换一行？

1 个答案: