在 D3 中重新绘制/刷新图形答案

【问题标题】：Repainting/Refreshing Graph in D3在 D3 中重新绘制/刷新图形
【发布时间】：2017-03-09 19:12:36
【问题描述】：

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

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

一般来说，我的源代码遵循这个结构：

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 中呈现。

对我有什么建议吗？

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

【问题讨论】：

标签： javascript jquery d3.js svg

【解决方案1】：

好的团队，

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

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

解决方法是简单地添加以下行：

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

在我的 updateGraph() 函数中。

这将删除您之前创建的所有“g”元素。这样，svg 容器仍然存在，您可以使用新数据填充。

【讨论】：