D3.js中未生成柱状图反而创建多个SVG的问题求助

你遇到的多个SVG被生成的核心原因，是你的脚本每次执行时都会调用d3.select('body').append('svg')，如果脚本被重复触发（比如多次引入脚本、页面刷新/事件重复触发），就会不断在body里新增SVG元素。下面给你两种可靠的解决思路：

方案1：创建前清除已有SVG #

在生成新SVG之前，先移除页面中所有已存在的SVG，确保每次只保留最新的一个：

<script>
// 先清除body下所有SVG，避免重复创建
d3.select('body').selectAll('svg').remove();

d3.csv("data/mydata.csv", function (data) {
 console.log(data);
 var canvas = d3.select('body')
 .append('svg')
 .attr("width", 500)
 .attr("height", 500);
 var groupA = canvas.append("g");
 var bars = groupA.selectAll('rect')
 .data(data)
 .enter()
 .append('rect')
 .attr("x", 0)
 .attr("y", function(d,i){ return i*30;})
 .attr("width", function(d){ return d.a*40;} )
 .attr("height", 20);
 });
</script>

方案2：给SVG设置唯一ID，按需创建 #

这种方式更灵活，只会在没有对应ID的SVG时才创建新的，适合需要保留其他SVG的场景：

<script>
d3.csv("data/mydata.csv", function (data) {
 console.log(data);
 // 尝试选择已存在的带ID的SVG
 var canvas = d3.select('body').select('#bar-chart-svg')
   .attr("width", 500)
   .attr("height", 500);

 // 如果没有找到该SVG，才创建新的
 if (canvas.empty()) {
   canvas = d3.select('body')
     .append('svg')
     .attr("id", "bar-chart-svg")
     .attr("width", 500)
     .attr("height", 500);
 }

 // 清空已有图形，避免重复添加矩形
 canvas.selectAll('*').remove();

 var groupA = canvas.append("g");
 var bars = groupA.selectAll('rect')
 .data(data)
 .enter()
 .append('rect')
 .attr("x", 0)
 .attr("y", function(d,i){ return i*30;})
 .attr("width", function(d){ return d.a*40;} )
 .attr("height", 20);
 });
</script>

另外，你也可以检查下自己的HTML页面，确认是否多次引入了这段D3脚本，或者有没有其他事件（比如按钮点击、页面重复渲染）导致这段代码被反复执行，从根源上避免重复触发。

内容的提问来源于stack exchange，提问作者Chris Young