问题描述
为了模仿下面网站右下角的功能，画出动态图，自己做的chartv1.0版本，是通过选中所有的rects，先remove掉，再重新画。可以达到效果，不过这次尝试直接重新赋值数据，达到更新rects实现动态画图。
https://mitweb.itn.liu.se/geovis/eXplorer/swe/
测试如何更新数据
以简单柱状图为测试对象
<svg id="chart" width="300" height="150"></svg>
<button> click me to change rects</button>
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的值哪个更好，还需要探究。
