Question

我想知道如何更新d3.js图表。通过阅读实例后， - 在这里很好地解释：http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_ordinal_scales_explained - 我认为我确实理解这些原则，但还没有深入理解。

以下代码绘制了页面刷新后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);
});

});
});

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

Answer 1

我的解决方案：

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 click事件（动态创建btns与函数中的每个不同参数）在每个btn上工作，而不仅仅在页面刷新上。当然欢迎提出改进我的解决方案的建议。

通过按钮单击而不是页面刷新来了解d3.js更新

1 个答案: