向左绘制时d3线过渡失败

Question

我正在尝试创建一个函数，该函数将成为重复绘制线条并使其淡出的基础。 彼得·库克（Peter Cook）的“风图”（Wind Map）大致启发了我，他在这里进行了讨论： http : //prcweb.co.uk/making-the-uk-wind-chart/ 我正在尝试重新创建他的测试线。

我可以使测试线正常工作-但前提是它们必须向左画或摆动，即当原始x2大于新的x2时，它们才过渡到。 下面的代码按我期望的方式工作。 但是，如果我将x2更改为大于500（标记为“ ISSUE IS HERE”），它将不会绘制。 我很困惑 为什么要关心它朝哪个方向前进？

<!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的宽度为300px（因此，在您的“工作”代码中，您只会看到该行的一小部分，在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>

向左绘制时d3线过渡失败

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-01-25 15:10:13

向左绘制时d3线过渡失败

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-01-25 15:10:13

解决方案1
2 已采纳 2017-01-25 15:10:13