Javascript 通过点击按钮而不是页面刷新来理解d3.js更新

我想知道，如何更新d3.js图表。在阅读示例之后，-这里解释得很好：-我认为我确实理解这些原则，但还不深入

以下代码在页面刷新后绘制Jim的气泡图，并使用事件处理程序单击div-代码简化：

jQuery(function($) {

root.plotData = function(selector, data, plot) {
return d3.select(selector).datum(data.slice(start=0,stop=10)).call(plot);
};

plot = Bubbles();

display = function(data) {
return plotData("#vis", data, plot);
};

return d3.csv(url, display);
});

现在我想更新图表：

$("#some_id").on("click",function(){

updateLabels = function() {


root.plotData = function(selector, data, plot) {
return d3.select(selector).datum(data.slice(start=10,stop=20)).call(plot);
};

plot = Bubbles();

display = function(data) {
return plotData("#vis", data, plot);
};

return d3.csv(url, display);
});

});
});

但是，除非我先刷新页面，否则不会从我的按钮调用显示功能。我对问题可能是什么感到有点困惑。 为什么第一个单击“渲染”，而第二个单击“不渲染”？

我的解决方案：

function clicked_eventHandler() {

// insert here  code chart rendering based on Jim's force directed layout bubble charts

jQuery(function($) {

// removing all children from element id="vis"
var svg = d3.select("#vis");
svg.selectAll("*").remove();


// running the display function
the new dataset is created by slicing the data setting two variables
start and stop ( here for test purposes set to 0, 10 ). This allows to slice rows 
out of a long csv file.


root.plotData = function(selector, data, plot) {
return    d3.select(selector).datum(data.slice(start=0,stop=10)).call(plot);
};

plot = Bubbles();

display = function(data) {
return plotData("#vis", data, plot);
};

return d3.csv(url, display);
});

};

---

意识到我需要刷新页面以清除id=“vis”，我决定选择id=“vis”并删除所有子项来启动该功能。现在，btn点击事件（使用函数中的每个不同参数动态创建的btn）在每个btn上工作，而不仅仅是页面刷新。当然欢迎您提出改进我的解决方案的建议。

您能提出建议吗？我简化了代码；我不知道如何摆弄小提琴；整个代码，还是我这里的代码？你说得对。您需要将图表创建放在一个函数中，就像您所说的那样，只有在刷新页面时数据才会更改。更改它，使“数据更新”按钮单击，然后依次运行图表更新功能ThisOneGuy-谢谢。也许你可以帮助我完成这个逻辑：刷新页面后，我的按钮点击工作，图形被绘制出来。单击另一个按钮似乎会调用EventHandler，但图形不会重新绘制。只有在页面刷新后，第二个按钮才能按预期工作。这是意料之中的事吗？重新绘制图形是否需要其他内容？为什么第二次btn点击不会触发图形重画？