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

Question

考虑这段代码:

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

HTML:

<div id="treemap" ...>
    <rect class="node" id="cityName" ...>
    <rect class="node" id="cityName" ...>
    <rect class="node" id="cityName" ...>
    ...
</div>

此外，这里是创建 TreeMap 结构的代码:

var node = div.datum(newRoot[0]).selectAll(".node")
          .data(treemap.nodes)
          .enter().append("rect")
            .attr("class", "node")
            .attr("id", function(d){
              return d.cityname ? d.cityname.replace(/[\W\s]/g,"")+"-"+d.stusps: null;
            })...//The rest is inconsequential for this problem.

现在 msa = d3.select(this).attr('class'); 返回预期的“节点”。然而，该元素上的 ID 是一个城市的名称，上面的 JavaScript 代码返回 null，我可以看到该 ID 存在于 DOM 中。为什么 .attr() 方法不接受“id”和“class”，我如何获得 ID？

此外，我可以将另一个库与我的堆栈一起使用，例如 JQuery 来获取 ID，但我想使用 D3 来完成。这可能是我的纯粹主义者 ;)

我看过here仍然没有看到它。有什么想法吗，谢谢？

更新:

一个建议是将 SVG 附加到 div，然后像这样在 SVG 标签下创建 TreeMap :

   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");

结果:

树形图现在不可见或不可访问。此外，我发现的大多数 TreeMap 示例都创建了没有任何 SVG 标签的 TreeMap 。这里有官方example .他们都错了吗？

Answer 1

您的标记无效。 HTML div 中不能有 SVG rect；矩形需要嵌套在 svg 容器中。

然后，使用这段代码:

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

你在点击什么？无效标记不会产生矩形，也不会产生任何可点击的内容。

所以... if you place the rects in an svg your code works as expected .