Question

我目前有一个下拉列表和日期选择器，点击后会返回一个新的数据源。可以看到类似的方法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内部呈现。

对我有什么建议吗？

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

Answer 1

好的团队，

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

就像我说的那样，我在新图表下方添加了新图表。我在解决以前的数据时遇到了问题，而且我似乎无法弄清楚如何指定一个特定的图表来清除而不清除我的所有数据（旧的和新的）。

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

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

在我的updateGraph（）函数中。

这会删除所有＆＃34; g＆＃34;您之前创建的元素。这样，svg容器仍然存在，您可以填充新数据。

D3中重绘/刷新图形

1 个答案: