問題描述

為了模仿下面網(wǎng)站右下角的功能，畫出動態(tài)圖，自己做的chartv1.0版本，是通過選中所有的rects，先remove掉，再重新畫。可以達到效果，不過這次嘗試直接重新賦值數(shù)據(jù)，達到更新rects實現(xiàn)動態(tài)畫圖。
https://mitweb.itn.liu.se/geovis/eXplorer/swe/

測試如何更新數(shù)據(jù)

以簡單柱狀圖為測試對象

<svg id="chart" width="300" height="150"></svg>
<button> click me to change rects</button>

js代碼

// 初始參數(shù)
var dataset1= [250 , 210 , 170 , 130 , 90];
var dataset2 = [233 , 145 , 446 , 34 , 90];
var rectheight = 25;

// 以dataset1畫出原圖
d3.select("#chart")        
    .selectAll("rect")
    .data(dataset1)       
    .enter()       
    .append("rect")        
    .attr("x",20)        
    .attr("y", (d,i) => i*rectheight)        
    .attr("width", (d) => d)        
    .attr("height", rectheight-2)        
    .attr('fill',"steelblue");

// 給button綁定點擊事件，控制切換數(shù)據(jù)
d3.select("button")                
    .on("click",function(){                    
d3.select("#chart")
    .selectAll("rect")                    
    .data(dataset1)                   
    .transition()                            
    .duration(1000)                         
    .attr("width", (d) => d)
})

最終點擊效果如下

柱狀圖動態(tài)切換.gif

總結(jié)：

1、結(jié)合其他d3使用經(jīng)驗，切換數(shù)據(jù)達到重新繪圖的目的，需要調(diào)整到具體的"x"、"y"、"width"、"height"等參數(shù)才行。比如，調(diào)整圓的位置，可以直接調(diào)整"cx"、"cy"的值。
2、可以適當添加部分動畫效果。
3、至于先remove再重新繪制rects與直接修改當前rects的值哪個更好，還需要探究。