Javascript D3.js进入、更新、退出问题

我有一个相对简单的柱状图。我想在带有“单击”事件的数据集之间进行

.transition（）

。我得到的是一个附加到DOM id的附加图表的完整重画，而不是删除原始图表并转换或替换它。我想我误解了如何正确地

.remove（）

---

有人能告诉我这应该是什么样子，或者告诉我我做错了什么吗？

您的reDraw函数会附加svg，这意味着每次调用reDraw时都会附加一个新的svg，因此是双图表。我建议把这些线

var stepbars = d3.select("#steps-bar")
        .append("svg:svg")
        .attr("width", width)
        .attr("height", height)

上面是重画函数

此外，重画函数不调用remove。我会这样做：

//Select and bind to data
var selection = stepbars.selectAll("rect")
        .data(data);

//Enter and create new rectangles
selection.enter()
        .append("rect");

//Update all rectangles
selection.attr("x", function(d,i){ return i * width/data.length; })
        .attr("y", function(d){ return yScale(d.value); })
        .attr("width", width/data.length - barPadding)
        .attr("height", function(d) { return height-yScale(d.value); })
        .attr("fill", function(d){ return stepColor(d.value/2000); });

//Remove unused rectangles
selection.exit().remove();

//Select and bind to data
var selection = stepbars.selectAll("rect")
        .data(data);

//Enter and create new rectangles
selection.enter()
        .append("rect");

//Update all rectangles
selection.attr("x", function(d,i){ return i * width/data.length; })
        .attr("y", function(d){ return yScale(d.value); })
        .attr("width", width/data.length - barPadding)
        .attr("height", function(d) { return height-yScale(d.value); })
        .attr("fill", function(d){ return stepColor(d.value/2000); });

//Remove unused rectangles
selection.exit().remove();