如何在 d3 中选择前两个元素并对其应用过渡
How to select first two elements in d3 and apply transition to them?
我想在 svg 中选择前两个矩形并对其应用过渡。我该怎么做?
<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);
});
});
此代码给出以下错误。
rect1.transition is not a function
我会选择所有元素,然后过滤掉你不想要的元素:
var rects = d3.selectAll("rect")
.filter(function(d, i) { return i == 0 || i == 1; });
rects.transition()...
这是
为了对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);
}
});
谢谢。
相关文章:
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 如何在jQuery中包装两个元素的组
- JavaScript:当有两个B类元素时,如何在id X中的B类中选择A类
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- Jquery:当两个或多个条件为true时,选择一个元素
- 如何按id查找两个类中任一类的子元素
- react-让一个元素返回两个相邻的<tr>标签
- 检查来自不同数组的两个元素的一个属性是否相等
- javascript函数包含两个元素和web音频api
- 如何比较两个字符串并删除jquery中的元素
- 将JQuery单击事件直接指向同一元素的两个
- 如何使用jQuery绕过具有指定类和两个条件的元素的函数
- 使用Javascript匹配两个HTML元素的高度
- 如何在两个动画画布元素之间进行通信
- 如何将日期和时间拆分为两个元素
- 检查最后两个元素
- 如何选择嵌套了两个 .each() 函数的多个元素
- 在两个元素的 onrender 事件之后执行函数
- 检查两个或多个 DOM 元素是否重叠
- 如何在同一个表中显示这两个嵌套ng重复的元素