在 D3js 中跟踪附加的图像

Keep track of appended image in D3js

本文关键字：图像 跟踪 D3js      更新时间：2023-09-26

我正在将微调器的图像附加到特定事件的图标上：

if (d.state == "0") {
    d3.select(this).append("svg:image")
    .attr("class", "circle")
    .attr("id", this.name)
    .attr("xlink:href", "Images/icons/ajax-loader.gif")
    .attr("x", "+16px")
    .attr("y", "-16px")
    .attr("width", "20px")
    .attr("height", "20px");
} else if (d.state == "1") {
    d3.select("#" + d.name)
    .remove();
}

在状态更改时，我想删除/隐藏此微调器图像。如何跟踪它？是否有一种机制可以将 ID 与它相关联，以便我以后可以使用它来删除它？

我尝试使用 ID（如代码片段所示），但它不起作用。

多种方式（取决于你如何使用它的更大上下文）：

您可以将其分配给变量：

spinner = d3.selet(this).append("svg:image")
  .attr('class', "circle")
  ...

然后用spinner.remove()删除它.var spinner必须在代码中使用它的所有位置都可以访问的位置（即文件顶部）声明。

您可以使用 .attr("id", "my_image") 为其分配一个 id，以后可以使用 d3.select("#my_image") 根据该 id 选择它。或者，您可以按其类d3.select('circle')选择它。

如果您有多个具有相同 id 的图像，则 Id 将不起作用，而对于类，如果有多个图像，除非您首先d3.select(...)其中一个图像的父级，否则它们都会被选中。

相关文章：