向左繪制時d3線過渡失敗
[英]d3 line transition fails when drawing left
問題描述
我正在嘗試創建一個函數，該函數將成為重復繪制線條並使其淡出的基礎。 彼得·庫克（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>
1 個解決方案
解決方案1
2 已采納 2017-01-25 15:10:13
無論新的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線過渡
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.