[英]D3: Can I have an svg transition based on items in a list?
I would like to take a list... 我想列一个清单......
var data = [100, 200, 300] // arbitrarily long
... and transition an element across the screen based on each list item. ...并根据每个列表项在屏幕上转换元素。 For example, I would like to send a dot first to [100,100], [200,100], [300,100].
例如,我想首先发送一个点到[100,100],[200,100],[300,100]。 Is there a way to do this with data joining?
有没有办法通过数据加入来做到这一点?
Right now, I have have a solution that works, but it works in what seems to be a very un-D3-ish way: using a counter to iterate through a list, and using no data-binding. 现在,我有一个可行的解决方案,但它的工作原理似乎是一种非常不正确的D3方式:使用计数器迭代列表,并且不使用数据绑定。 Excluding the CSS, here's the code:
排除CSS,这是代码:
<svg>
<circle/>
</svg>
<script>
var data = [100,200,300]
var circle = d3.selectAll("circle")
.attr("r",20)
.attr("cy",100)
.attr("cx",0)
var count = 0
repeat()
function repeat() {
var run = circle
.transition()
.duration(1000)
.attr("cx", function (d) {return data[count]});
count++
if (count < data.length){
run
.each("end", repeat);
}
}
</script>
Shouldn't there be a way to do this with data binding? 不应该有数据绑定的方法吗? I'd love to do this the right way, but for now this is all I can figure out just to make it work.
我希望以正确的方式做到这一点,但是现在这是我能想到的只是为了让它发挥作用。
Using this as a reference: https://bl.ocks.org/mbostock/1125997 使用它作为参考: https : //bl.ocks.org/mbostock/1125997
I'm not convinced this is the best way to do it, because it still relies on an external variable count
, which is not very D3. 我不相信这是最好的方法,因为它仍然依赖于外部变量
count
,这不是很多D3。
Note the array structure of data
. 注意
data
的数组结构。
https://jsfiddle.net/e51rzkth/4/ https://jsfiddle.net/e51rzkth/4/
var data = [[[100,100],[200,100],[300,100]]]
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r",20)
.style("fill", "red")
var count = 0
circle
.transition()
.duration(1000)
.delay(250)
.on("start", function repeat() {
d3.active(this)
.transition()
.attr('cx', d=>d[count][0])
.attr('cy', d=>d[count][1])
.transition()
.on("start", repeat);
count++;
});
For funsies, an example with multiple circles, each with their own path. 对于funsies,一个包含多个圆圈的示例,每个圆圈都有自己的路径。
https://jsfiddle.net/e51rzkth/3/ https://jsfiddle.net/e51rzkth/3/
Yes, you could enter/append circles based on the data in the array, and then set cx based on it's data. 是的,您可以根据数组中的数据输入/追加圆圈,然后根据它的数据设置cx。 Also, you can achieve the staggering by basing the transition delay on the data point's index, eg https://jsfiddle.net/65aeo5q5/ :
此外,您可以通过基于数据点索引的转换延迟来实现交错,例如https://jsfiddle.net/65aeo5q5/ :
var circle = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r",20)
.attr("cy",100)
.attr("cx",0)
.style("fill", "red")
var delay = 1000;
circle
.transition()
.duration(delay)
.delay(function (d, i) {return i * delay;})
.attr("cx", function (d) {return d;});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.