d3.js - d3.select("#id).remove() 或 .attr("class", "hidden") 不工作

d3.js - d3.select("#id).remove() or .attr("class", "hidden") not working

我正在尝试删除甚至设置 javascript 中 d3 svg 元素的 class,但它似乎没有得到应用。

d3 元素是组的一部分,如果我将 id 设置为单个单词,例如"region" 它会 delete/modify 但我想要的是整个团队。

我在附加元素时为所有元素分配了它们的特定名称。

但是,正如标题所暗示的那样,d3.select 不允许我修改现有元素。

这是 chrome 元素视图中的结构图像。

关于如何构建路径以及我如何尝试操纵它们的示例代码。

// Construction
features.selectAll()
            .data(json.features)
            .enter()
            .append("path")
            .attr("class", function (e) {
                return "region " + e.properties.Name + " feature";
            })
            .attr("d", path)
            .attr("id", function(e) {
                return "region " + e.properties.Name + " feature";
            })
            .on("click", function (d) {
                qualifyType(d);
            });

// Manipulation
d3.select("#region South East feature").attr("class", "hidden");
d3.select("#region " + feature.properties.Name + " feature").remove();

我也尝试了一些其他变体,例如 d3.selectAll and what not but no joy。

D3 使用 CSS 选择器来选择元素,在那些 class 中名称必须以点为前缀。因此,选择 ID 为 region 和 classes South East feature 的元素将如下所示:

d3.select("#region.South.East.feature")