在D3中重绘/刷新图形

我目前有一个下拉和日期选择器，单击时返回一个新的数据源。类似的方法见here。在D3中重绘/刷新图形

此数据源用于创建我的图形并向上/向下缩放显示的数据量。

一般情况下，我的源代码如下这样的结构：

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.*/ 
};

现在，我的附加网址源代码的工作 - 用正确的数据集的图并重新渲染。但只有当我在updateGraph函数中定义了我的SVG元素时。当我这样做时，一个新的图形会呈现出合适的图形，但它会在旧图形下方弹出一个新图形。这不是我想要的。我希望我的新图取代旧图。

当我尝试拉动我的SVG元素之前updateGraph函数（所以定义的边距和尺寸定义的地方），该图并没有重复下拉的变化，但它分层的数据以我无法查看任何有用的数据。

基本上，我无法删除新数据请求上的所有图形元素。你会怎么建议去做这件事？我觉得它应该像在我的updateGraphData（）函数中使用svg.selectAll（“*”）。remove（）一样简单，但它只是停止在SVG内呈现任何数据。

对我有何建议？

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

来源

2017-03-09 KateJean

好的团队，

小时后并寻找答案的时间，我终于找到了一个。希望这会帮助别人。

所以就像我说的，我得到了新的图形追加到旧图形下面。我有问题得到以前的数据清除，我似乎无法弄清楚如何指定一个特定的图形清除，而无需清除我的所有数据（新旧）。

溶液简单地增加线：

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

以我updateGraph（）函数。

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

来源

2017-03-10 14:45:29 KateJean

在D3中重绘/刷新图形

回答

相关问题