Javascript 如何在D3中按类选择元素并检索其ID

考虑以下代码：

   d3.selectAll("#treemap rect").on("click", function(){
      msa = d3.select(this).attr('id');
      console.log(msa);
    });

HTML:

现在

msa=d3.select（this.attr（'class'）返回预期的“节点”。但是，该元素上的ID是城市的名称，上面的JavaScript代码返回null，我可以看到ID在DOM中。为什么.attr（）方法不接受“id”和“class”，以及如何获取id

此外，我可以使用另一个带有堆栈的库，比如JQuery来获取ID，但我想使用D3。这可能是我身上的纯粹主义者；）

我已经看过了，但还是没看到。有什么想法吗，谢谢

更新：

一个建议是在div中附加一个SVG，然后创建树映射，如下所示：

   var div = d3.select("#dashboardA").append("div")
      .style("position", "relative")
      .attr("id", "treemap");

div = div.append("svg")
  .style("width", (width + margin.left + margin.right) + "px") //1220px
  .style("height", (height + margin.top + margin.bottom) + "px") //558px
  .style("margin", "auto")
  .style("left", margin.left + "px")
  .style("top", margin.top + "px");

结果：

树映射现在不可见或不可访问。此外，我发现的大多数树映射示例都创建了没有SVG标记的树映射。这是一位官员。它们都错了吗？
您的标记无效。在HTML
div
中不能有SVG
rect
；矩形需要嵌套在svg容器中

然后，使用此代码：

d3.selectAll("#treemap rect").on("click", function(){
  msa = d3.select(this).attr('id');
  console.log(msa);
});

你在点击什么？无效的标记不生成矩形，也没有可单击的内容

所以
 我知道这只是一个玩具的例子，但实际的结构是什么？您没有将svg:rect放入html:div中，可能是在某个地方您将rect放入g.node或类似的行中。因为d3.select（this.attr（“id”）应该为您提供节点id。@Elijah实际上我并没有创建svg标记，只是在上面的dev下面创建了一个直接的rect标记。这就是DOM中的结构。您是说缺少svg标记是问题的一部分吗？澄清问题，树映射代码给出了上述结果，您可以看到元素中存在id attr，对吗？@FranciscoGarcia Correct。我可以看到ID出现在DOM.@Mr.Concolato中，您链接到的示例是将
divs
放在
divs
中，它不需要
svg
标记。您正在将
rect
放在一个div中。rect是一个SVG元素，它需要在SVG标记中。不完全是。要么你错过了什么，要么你必须更深入/提供更多信息。请查看我的更新，谢谢。。@Concolato先生，您需要创建一个可复制的示例。我上面的例子表明，通过标记和单击处理程序，事情按预期进行。根据您的经验，您可能是正确的，但根据我在D3网站上的问题中的示例，我无法让该示例使用SVG标记。当我移除标记时，树映射显示出来。不知道为什么？不过，我会投票赞成你的建议。
   var div = d3.select("#dashboardA").append("div")
      .style("position", "relative")
      .attr("id", "treemap");

div = div.append("svg")
  .style("width", (width + margin.left + margin.right) + "px") //1220px
  .style("height", (height + margin.top + margin.bottom) + "px") //558px
  .style("margin", "auto")
  .style("left", margin.left + "px")
  .style("top", margin.top + "px");

d3.selectAll("#treemap rect").on("click", function(){
  msa = d3.select(this).attr('id');
  console.log(msa);
});