向左绘制时d3线过渡失败答案

【问题标题】：d3 line transition fails when drawing left向左绘制时d3线过渡失败
【发布时间】：2017-01-25 15:03:20
【问题描述】：

我正在尝试创建一个函数，该函数将作为重复绘制线条并将它们淡出的基础。我大致受到彼得库克的风图的启发，他在这里讨论：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>

【问题讨论】：

标签： javascript d3.js transition

【解决方案1】：

无论新的 x2 比原始值大还是小，转换都在起作用，这不是问题所在。

您看不到任何内容，因为默认情况下，SVG 的宽度为 300 像素（因此，在您的“工作”代码中，您只能看到行的一小部分，从 x 中的 300 到 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>

【讨论】：