向左绘制时 d3 行转换失败

Question

我正在尝试创建一个函数，它将作为重复绘制线条并将其淡出的基础。我大致受到彼得库克的风图的启发，他在这里讨论：http://prcweb.co.uk/making-the-uk-wind-chart/。我正在尝试重新创建他的测试线。

我可以让测试线工作——但前提是它们向左绘制或摆动，即当原始 x2 大于它们过渡到的新 x2 时。下面的代码按我期望的方式工作。但是，如果我将它正在绘制的 x2 更改为（用注释 'ISSUE IS HERE' 标记）大于 500，它就不会绘制。我很困惑。为什么它会关心它画的方向？

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE GOES HERE</title>
 </head>
  <body>

<svg></svg>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
function lineAnimate(selection) {
    selection
        .attr('x1', 500)
        .attr('x2', 500)
        .attr("stroke-width", 2)
        .attr("stroke", "black")
        .attr('y1', function(d) {return d;})
        .attr('y2', function(d) {return d;})
        .style('opacity', 0.5)
        .transition()
            .ease('linear')
            .duration(1000)
            // .delay(function(d) {return d*10;})
            .attr('x2', 200)  // ISSUE IS HERE
        .transition()
            .delay(1000)
            .duration(1000)
            .style('opacity', 0)
        .each('end', function() {d3.select(this).call(lineAnimate)})
    console.log("done");
    }

    var svg = d3.select('svg')
        .selectAll('line')
        .data([5, 10, 15, 20, 25])
        .enter()
        .append('line')
        .call(lineAnimate);

    console.log(svg.size());
    </script>

  </body>
</html>

Answer 1

转换工作正常，无论新的 x2 大于或小于原始值，这都不是问题。

您什么都看不到，因为默认情况下，SVG 的宽度为 300 像素（因此，在您的 "working" 代码中，您只能看到线条的一小部分，从 300 到x 坐标为 200；从 500 到 300 的所有线段都不可见）。

只需更改宽度：

<svg width="600"></svg>

这是您的代码：

<svg width="600"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
function lineAnimate(selection) {
    selection
        .attr('x1', 500)
        .attr('x2', 500)
        .attr("stroke-width", 2)
        .attr("stroke", "black")
        .attr('y1', function(d) {return d;})
        .attr('y2', function(d) {return d;})
        .style('opacity', 0.5)
        .transition()
            .ease('linear')
            .duration(1000)
            // .delay(function(d) {return d*10;})
            .attr('x2', 600)  // ISSUE IS HERE
        .transition()
            .delay(1000)
            .duration(1000)
            .style('opacity', 0)
        .each('end', function() {d3.select(this).call(lineAnimate)})
    }

    var svg = d3.select('svg')
        .selectAll('line')
        .data([5, 10, 15, 20, 25])
        .enter()
        .append('line')
        .call(lineAnimate);

    </script>

向左绘制时 d3 行转换失败

d3 line transition fails when drawing left

javascript

transition

d3.js