d3 line transition fails when drawing left
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/ . 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. 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. 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>
1 answers
solution1
2 ACCPTED 2017-01-25 15:10:13
The transition is working, regardless the fact that the new x2 is bigger or smaller than the original value, that's not the problem.
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).
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.