왼쪽을 그릴 때 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> 
 
<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

* 마른 세수 * 당신을 감사 : 여기

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

당신의 코드입니다 :

그냥 너비를 변경 – oregano

왼쪽을 그릴 때 d3 줄 전환이 실패합니다.

답변

관련 문제