d3過渡可變長度的條形圖

我有一個8條形條形圖。現在我想創建一個條形圖，其中包含10個條形圖，用於轉換。過渡效果很好，但我的新條形圖也只有8條。我的HTML：d3過渡可變長度的條形圖

<html> 
<head> 
    <title>TransitionTest</title> 
    <script src="d3.v2.js"></script> 
</head> 
<body> 
    <script src="TransitionTest.js"></script> 
    <button onclick="transitioning()"> 
     Transition 
    </button> 

</body> 
</html>

我的腳本：

var data = [0,1,2,3,4,5,6,7]; 

var height = 500; 
var width = 1000; 
var svg = d3.select("body") 
     .append("svg") 
     .attr("class", "svg") 
     .attr("width", width) 
     .attr("height", height) 

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

var yScale = d3.scale.linear() 
      .domain([0,9]) 
      .range([height,0]) 

var bar = svg.selectAll("rect") 
     .data(data) 
     .enter() 
     .append("rect") 
     .attr("class", "bar") 
     .attr("x", function (d,i) { 
      return xScale(i); 
     }) 
     .attr("y", function (d) { 
      return yScale(d); 
     }) 
     .attr("width", function (d,i) { 
      return (99); 
     }) 
     .attr("height", function (d) { 
      return (height-yScale(d)); 
     }) 
     .attr("fill", "grey"); 

function transitioning() { 
data = [8,6,4,2,0,9,7,5,3,1]; 
bar.data(data) 
    .transition() 
    .attr("x", function (d,i) { 
     return xScale(i/2); 
    }) 
    .attr ("y", function (d) { 
     return yScale(d); 
    }) 
    .attr("width", function (d,i) { 
     return (49); 
    }) 
    .attr("height", function (d) { 
     return (height-yScale(d)); 
    }); 
}

我在做什麼錯？

來源

2012-11-09 miaupaurr

您需要使用enter()選擇來添加新條，這與您首先添加條的方式類似。因此，在你的函數transitioning()，你需要有一個像

bar.data(data).enter().append("rect")...

另一個呼叫您可以橫槓「顯示」設置高度（和/或寬度）爲0，然後再調用transition()，並將其設置爲實際值。有關不同選擇/連接的更多詳細信息，請參閱this tutorial。

來源

2012-11-09 11:45:21

現在我改變了我的過渡功能，這樣的：

function transitioning() { 
if (i==1){ 
    data = [0,1,2,3,4,5,6,7]; 
    i=0; 
} 
else if (i==0){ 
    data = [8,6,4,2,0,9,7,5,3,1]; 
    i++; 
} 

bar.data(data).enter().append("rect") 
.attr("class", "bar") 
.attr("x", function(d,i) { 
    return xScale(i); 
}) 
.attr("y", height) 
.attr("height", 0) 
.attr("width", 99) 
.attr("fill", "grey") 
.transition() 
.attr("height", function(d) { 
    return (height-yScale(d)); 
}) 
.attr("width", 99) 
.attr("y", function(d) { 
    return yScale(d); 
}); 

bar.transition() 
.attr("x", function(d,i) { 
    return xScale(i); 
}) 
.attr("y", function(d) { 
    return yScale(d); 
}) 
.attr("height", function(d) { 
    return (height-yScale(d)); 
}) 
.attr("width", 99) 
.attr("fill", "grey"); 

bar.exit().transition() 
.attr("y", height) 
.attr("height", 0) 
.remove(); 
}

和它的作品除了exit（）函數。每次點擊都會改變我的條形圖，但較長數據中的最後2個條形不會消失。當我使用螢火蟲時，我可以看到，每當我切換到更長的數據數組2時，都會生成新的條形圖元素。我怎樣才能讓他們被刪除？

來源

2012-11-14 11:03:15 miaupaurr

d3過渡可變長度的條形圖

回答

相關問題