D3.js过渡问题

Question

我正在学习D3.js，看起来很简单，那么......直到这个过渡出现为止。

我想使矩形条动画它们的宽度，但他们所做的只是颜色在变化。

我不明白我做错了什么。

这里是我的的JavaScript

var dataArray = [20, 30, 40, 60]; 
dataArray2 = [20, 40, 60]; 
dataPosition = [0, 300, 600]; 
width = 500; 
height = 500; 

var widthScale = d3.scale.linear() 
    .domain([0, 60]) 
    .range([0, width]); 

var axis = d3.svg.axis() 
    .ticks(5) 
    .scale(widthScale); 

var colorScale = d3.scale.linear() 
    .domain([0, 60]) 
    .range(["hsl(" + Math.random() * 360 + ",100%,50%)", "hsl(" + Math.random() * 360 + ",100%,50%)"]); 

var canvas = d3.select("body") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(20,0)"); 


var bars = canvas.selectAll("rect") 
    .data(dataArray) 
    .enter().append("rect") 
    .transition() 
    .duration(1500) 
    .attr("width", function (d) { 
    return widthScale(d); 
}) 
    .attr("height", 50) 
    .attr("fill", function (d) { 
    return colorScale(d); 
}) 
    .attr("y", function (d, i) { 
    return i * 100; 
}) 


canvas.append("g") 
    .call(axis) 
    .attr("transform", "translate(0,400)"); 

My fiddle

是否也可以对沿途的矩形来进行迭代号码？

Answer 1

你必须首先将该值设为零，然后添加过渡代码的延迟时间，然后最终设定的实际值

http://jsfiddle.net/M8TXZ/1/

var bars = canvas.selectAll("rect") 
    .data(dataArray) 
    .enter().append("rect") 
    .transition() 
    .duration(1500) 
    .attr("height", 50) 
    .attr("fill", function(d) { 
     return colorScale(d); 
    }) 
    .attr("y", function(d, i) { 
     return i * 100; 
    }) 
    //Sets the width to zero 
    .attr("width", function(d) { 
     return 0; 
    }) 
    .transition() 
    .duration(1000) 
    //Sets the width to the actual value 
    .attr("width", function(d) { 
     return widthScale(d); 
    })