D3-我需要把我的“;draw”;或“;重新绘制“;函数可在单击时启用重绘

D3 - where do I need to put my "draw" or "redraw" function to enable redraw on click

本文关键字：函数 绘制 单击 启用 我的 draw 新绘制 D3-      更新时间：2023-09-26

我正在处理条形图。它显示了各州的流感疫苗接种率。点击图例，你可以在每个州的人口统计之间切换，太棒了！

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

工作示例如下。我想我调用函数的顺序不对？

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);
}

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

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

相关文章：