D3 - 我需要把我的＆＃34;绘制＆＃34;或＆＃34;重绘＆＃34;用于在点击时启用重绘的功能

Question

我正在制作条形图。它显示了各州的流感疫苗接种率。通过单击图例，您可以在每个州的人口统计之间切换，太棒了！

但是，要重新绘制图例需要双点击。一次单击成功杀死了条形图，但需要再次单击才能重绘它们。

工作示例在这里。我想我是以错误的顺序调用我的函数？

http://bl.ocks.org/greencracker/862062268ab398df4757

粗略地说，它：

declarations
d3.json (read in json){
    coerce data into numbers
    draw(input)  
    }

function draw (input) {
  draw bars here
  draw legend here
      legend.on("click", function (d) {return do_two_things(d);)
  }

function kill() {
   svg.selectAll(".bar")
   .remove()
}

function do_two_things(input) {
    kill();
    draw(input);
}

Answer 1

问题在于转型。这意味着杆/轴不会立即被移除。但是，重新绘制所有内容的代码会立即运行。当该代码运行时，条形图仍然存在，被选中，数据与它们匹配，因此.enter()选择为空。

解决此问题的最简单方法是删除转换，请参阅here。如果你想保留它，你需要错开两个代码块，确保第二个代码块只在删除了所有代码时执行。您可以使用例如transition.each("end", ...)事件处理程序，但它会使您的代码更加复杂。您也可以使用setTimeout()，参见here。