左に描画するとd3の線の切り替えが失敗する

線の繰り返し描画の基となるファンクションを作成しようとしています。私は大まかにピーター・クックの風の地図に触発されています。彼はここでそれについて話します：http://prcweb.co.uk/making-the-uk-wind-chart/。私は彼のテストラインを作り直そうとしています。左に描画するとd3の線の切り替えが失敗する

私は、テストラインが動作するようにすることができます - ただし、それらが左に描画またはスイングする場合、つまり、元の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>

出典

2017-01-25 oregano

新しいx2が元の値よりも大きくても小さくても、それは問題ではありませんが、移行は機能しています。

デフォルトでSVGの幅が300pxになっているため、何も表示されません（したがって、「作業中」のコードでは、300〜200の線分しか表示されませんx座標; 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>

出典

2017-01-25 15:10:13

*手のひらを顔に当てる*はあなたに感謝 – oregano

左に描画するとd3の線の切り替えが失敗する

答えて

関連する問題