在 D3 中重新绘制/刷新图表

Question

我目前有一个下拉菜单和日期选择器，单击时会返回一个新的数据源。类似的方法见这里。

该数据源用于创建我的图表并按比例放大/缩小显示的数据量。

一般来说，我的源代码遵循以下结构：

var updateGraphData = function(error, json) {
    updateGraph(json); 
}

    // datepicker code goes here
    // url param update code as seen in linked jsfiddle goes here

function MakeUrl() { 
    var urlSource = BaseURL + param1 + param2; /*these values are defined in the param code mentioned */
    d3.json(urlSource, updateGraphData); 
} 

    //set dimensions 
var margin = {top: 30,right: 60,bottom: 30,left: 60
};
var width = 800 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;
var color = d3.scale.category10();

function updateGraph(json_data) {
    /* everything I want drawn goes here, i.e. axes, lines, points, labels, etc.*/
}; 

现在，我附加的 url 源代码可以工作了——图表确实使用正确的数据集重新渲染。但仅当我在 updateGraph 函数中定义 SVG 元素时。当我这样做时，会正确渲染一个新图表，但它会在旧图表下方弹出一个新图表。这不是我想要的。我希望我的新图表取代旧图表。

当我尝试在 updateGraph 函数之前拉动我的 SVG 元素（在定义边距和尺寸的地方定义）时，图表不会在下拉列表更改时重复，但它以一种我看不到任何有用的方式对数据进行分层数据。

基本上，我无法在新数据请求中删除所有图形元素。您建议如何解决这个问题？我觉得它应该像在 updateGraphData() 函数中使用 svg.selectAll("*").remove() 一样简单，但这只会阻止任何数据在 SVG 内渲染。

对我有什么建议吗？

非常感谢！如果我不清楚，请告诉我。

Answer 1

好的团队，

经过几个小时的寻找答案，我终于找到了一个。希望这会对其他人有所帮助。

正如我所说，我正在将新图表附加到旧图表下方。我在清除以前的数据时遇到问题，而且我似乎无法弄清楚如何指定要清除的特定图表而不清除所有数据（旧的和新的）。

解决方案只需添加以下行：

d3.selectAll("g > *").remove()

在我的 updateGraph() 函数中。

这将删除您之前创建的所有“g”元素。这样，svg 容器就会保留，您可以填充新数据。