D3中重绘/刷新图形 [英] Repainting/Refreshing Graph in D3

问题描述

我目前有一个下拉列表和日期选择器，点击后会返回一个新的数据源。 此处可以看到类似的方法。

I currently have a dropdown and datepicker that when clicked, returns a new data source. A similar method is seen here.

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

This data source is used to create my graph and scale up/down the amount of data shown.

通常，我的源代码遵循以下结构：

Generally, my source code follows this construct:

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元素时。当我这样做时，一个新图形呈现正确，但它会在旧图形下面弹出一个新图形。这不是我想要的。我希望我的新图表替换旧的图表。

Now, my appended url source code works -- the graph does re-render with the proper data set. BUT ONLY when I define my SVG element inside the updateGraph function. When I do that, a new graph renders with the proper, BUT it pops a new graph below the old one. Which is not what I want. I want my new graph to replace the old one.

当我尝试在updateGraph函数之前拉出我的SVG元素时（如此定义了边距和尺寸的定义），图表在下拉列表更改时没有重复，但它以这样的方式分层数据，我无法看到任何有用的数据。

When I tried pulling my SVG element before the updateGraph function (so defined where the margin and dimensions are defined), the graph didn't repeat on dropdown change, but it layered the data in such a way that I was unable to see any useful data.

基本上，我无法删除新数据请求中的所有图表元素。您如何建议这样做？我觉得它应该像在我的updateGraphData（）函数中使用svg.selectAll（*）。remove（）一样简单，但这只会阻止任何数据在SVG内部呈现。

Basically, I am not able to remove all my graph elements on a new data request. How would you suggest going about this? I feel like it should be as easy as using a svg.selectAll("*").remove() in my updateGraphData() function, but that just stops any data from being rendered inside the SVG at all.

对我有什么建议吗？

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

Thank you very much! Let me know if I'm not being clear.

推荐答案

好的团队，

经过数小时和数小时的搜索一个答案，我终于找到了一个。希望，这将有助于其他人。

After hours and hours of searching for an answer, I finally found one. Hopefully, this will help someone else.

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

So like I said, I was getting new graphs to append below the old graph. I was having issues getting the previous data to clear out, and I couldn't seem to figure out how to specify a specific graph to clear without clearing all of my data (old and new) away.

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

The solution is simply adding the line:

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

在我的updateGraph（）函数中。

In my updateGraph() function.

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

This deletes all of the "g" elements you previously created. That way, the svg container remains and you can populate with new data.

这篇关于D3中重绘/刷新图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！