D3绘制柱状图以及数据更新

问题描述

为了模仿下面网站右下角的功能，画出动态图，自己做的chartv1.0版本，是通过选中所有的rects，先remove掉，再重新画。可以达到效果，不过这次尝试直接重新赋值数据，达到更新rects实现动态画图。
https://mitweb.itn.liu.se/geovis/eXplorer/swe/

测试如何更新数据

以简单柱状图为测试对象

 click me to change rects

js代码

// 初始参数
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绑定点击事件，控制切换数据
d3.select("button")                
    .on("click",function(){                    
d3.select("#chart")
    .selectAll("rect")                    
    .data(dataset1)                   
    .transition()                            
    .duration(1000)                         
    .attr("width", (d) => d)
})

最终点击效果如下

柱状图动态切换.gif

总结：

1、结合其他d3使用经验，切换数据达到重新绘图的目的，需要调整到具体的"x"、"y"、"width"、"height"等参数才行。比如，调整圆的位置，可以直接调整"cx"、"cy"的值。
2、可以适当添加部分动画效果。
3、至于先remove再重新绘制rects与直接修改当前rects的值哪个更好，还需要探究。