[英]How to select first two elements in d3 and apply transition to them?
I want to select first two rectangles in the svg and apply transitions to them. 我想在svg中选择前两个矩形并将过渡应用于它们。 How can I do that? 我怎样才能做到这一点?
<svg width="1000px" height="500px" style="border:1px solid #AAA;"></svg>
<input type="button" value="Start" id="startTransition">
var dataArray = [5,10,20,30,40,50,60,70,80,90];
var baseLineYposition = 200;
var getY = function(value){
return baseLineYposition - value;
};
var canvas = d3.select("svg");
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width",30)
.attr("height",function(d){return d;})
.attr("x",function(d,i){return i * 50;})
.attr("y",function(d,i){return getY(d);});
$(document).ready(function(){
$("body").on("click","#startTransition",function(){
var rect1 = d3.selectAll("rect")[0][0];
var rect2 = d3.selectAll("rect")[0][1];
rect1.transition().attr("x",200);
rect2.transition().attr("x",300);
});
});
This code is giving following error. 此代码提供以下错误。
rect1.transition is not a function
I would select all elements and then filter out the ones you don't want: 我会选择所有元素,然后过滤掉你不想要的元素:
var rects = d3.selectAll("rect")
.filter(function(d, i) { return i == 0 || i == 1; });
rects.transition()...
This is to apply transition for specific node
/ element
of the donut chart
. 这是为了应用donut chart
特定node
/ element
的转换。
var arcOver = d3.svg.arc()
.innerRadius(chart_r * 0.7)
.outerRadius(chart_r * 1.08);
d3.selectAll('.donut')
.selectAll('path')
.each(function(d, i){
if (i == 2) {
d3.select(this)
.transition()
.duration(500)
.attr("d", arcOver);
}
});
Thanks. 谢谢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.