向左绘制时d3线过渡失败

Question

I am trying to create a function that will be the basis of a repeated drawing of lines and fading them out. 我正在尝试创建一个函数，该函数将成为重复绘制线条并使其淡出的基础。 I am roughly inspired by Peter Cook's Wind Map, which he discusses here: http://prcweb.co.uk/making-the-uk-wind-chart/ . 彼得·库克（Peter Cook）的“风图”（Wind Map）大致启发了我，他在这里进行了讨论： http : //prcweb.co.uk/making-the-uk-wind-chart/ I am trying to recreate his test lines. 我正在尝试重新创建他的测试线。

I can get the test lines to work -- but only if they draw or swing to the left, ie when the original x2 is greater than the new x2 they transition to. 我可以使测试线正常工作-但前提是它们必须向左画或摆动，即当原始x2大于新的x2时，它们才过渡到。 The code below works the way I expect. 下面的代码按我期望的方式工作。 But if I change the x2 it is drawing to (marked with the comment 'ISSUE IS HERE') to be greater than 500, it won't draw. 但是，如果我将x2更改为大于500（标记为“ ISSUE IS HERE”），它将不会绘制。 I'm very confused. 我很困惑 Why would it care which direction it draws in? 为什么要关心它朝哪个方向前进？

<!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

The transition is working, regardless the fact that the new x2 is bigger or smaller than the original value, that's not the problem. 无论新的x2大于还是小于原始值，过渡都可以正常工作，这不是问题。

You don't see anything because, by default, an SVG has a width of 300px (so, in your "working" code, you're only seeing a small fraction of the line, from 300 to 200 in the x coordinate; all the segment from 500 to 300 is not visible). 您什么都看不到，因为默认情况下，SVG的宽度为300px（因此，在您的“工作”代码中，您只会看到该行的一小部分，在x坐标中从300到200；所有从500到300的细分不可见）。

Just change the width: 只需更改宽度：

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

Here is your code: 这是您的代码：

 <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