我的目标是从我的条形图中删除一个数据点。
然后它会自我更新:
更新 X 和 Y 轴
更新实际的条形图
更新图例
我遇到的问题:
当我 exit().remove() 图表中的矩形时,代码也会删除图例中的矩形。当我尝试 enter() 图例中的矩形时,它们不会出现。我不确定这里发生了什么,但由于数据更改,我无法成功添加和删除元素。任何帮助,将不胜感激。
我认为我遇到问题的代码片段:
这也是删除图例中的矩形的部分(我不确定我应该在这里还是在图例的输入/更新/删除部分执行此操作)
下面的代码在用户单击“全部删除”按钮后立即执行。我的意图是只删除一根柱(名为“ALL”的柱)并更新图表。
//Select rectangles
var bars = svg.selectAll("rect")
.data(dataset, function(d) { return d.State; });
//Enter rectangles
bars.enter()
.append("rect")
.style("fill", function(d,i) { return color(i) })
.attr("x", function(d) { return xScale(d.State); })
.attr("y", function(d) { return yScale(d.CustomerCount) })
.attr("width", xScale.rangeBand()) //returns rangeRoundBands width
.attr("height", function(d) { return h - yScale(d.CustomerCount) });
//Update rectangles
bars.transition()
.duration(1000)
.style("fill", function(d,i) { return color(i) })
.attr("x", function(d) { return xScale(d.State); })
.attr("y", function(d) { return yScale(d.CustomerCount) })
.attr("width", xScale.rangeBand()) //returns rangeRoundBands width
.attr("height", function(d) { return h - yScale(d.CustomerCount) });
//Exit rectangles
bars.exit()
.transition()
.duration(500)
.attr("x", w)
.remove();
这是完整的代码: http:
//plnkr.co/edit/Nue5bocQsI4E6D5wfNSP
这是稍微小一点的代码:
我试图尽可能地减少代码,但它仍然很大。
http://jsfiddle.net/aNQWV/