javascript - D3 - 我需要将 "draw"或 "redraw"函数放在哪里才能启用点击重绘

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 .