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

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() 函数中。

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