在 d3 中单击画布时删除数据

Removing data when clicking on canvas in d3

本文关键字：布时 删除 数据 单击 d3      更新时间：2023-09-26

我正在使用 d3 中的散点图。图表上的点代表不同的论文。有 3 种不同的类型，每个点都可以有 1） In_library 2） cited_by 3） 引用。这些类型都在与数据库建立的各种连接处设置，并设置为已检索的数据，然后将此数据推送到 allData。例如。单击In_library类型的论文时，将建立2个与数据库的连接，检索单击的论文引用的论文和引用单击的论文的论文。发生这种情况时，将调用 refreshGraph 函数，该函数清除所有当前点并使用更新的数据重新绘制点。

我的问题是，当我单击画布上的任意位置（图表上的点以外的任何地方）时，我希望删除带有引用和引用类型的点。

我在脑海中想象需要发生的是，循环应该遍历用于绘制点的数据，当遇到具有类型引用或被 引用的数据时，应该将它们从数据中删除。然后应该调用 refreshGraph，重新绘制的图形将不包括我删除的元素。

这是我在单击画布时的尝试：

var svg = d3.select("body")
.append("svg")
.on("click", function() {
    for(i=0;i<allData.length;i++){ 
        if (i.type == "cites"|| i.type == "cited by")
     {
        allData.splice(i, 1);
      }
    }
    refreshGraph();
    })

但这显然是错误的，因为它似乎根本没有做任何事情。我真的很感激任何反馈，因为我是 d3 的新手！提前感谢！

编辑：

此问题已通过将循环更改为 来解决：

for(var i = allData.length-1; i >=0; i--){ 
        if (allData[i].type === "cites"|| allData[i].type === "cited by")
     {
        allData.splice(i, 1);
      } 
    }

你为什么有else{ return} .这意味着，如果 allData 中有一个条目没有被引用或引用，refresGraph（） 将永远不会被调用。

将代码更改为

var svg = d3.select("body")
.append("svg")
.on("click", function() {
    for(i=0;i<allData.length;i++){ 
        if (i.type == "cites"|| i.type == "cited by"){
        allData.splice(i--, 1);
      }
    refreshGraph();
     })

我猜应该做这个把戏

相关文章：