如何通过 Class Select 元素并在 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>

此外，这里是创建树图结构的代码：

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'); returns "node" 这是预期的。然而，该元素上的 ID 是一个城市的名称，上面的 JavaScript 代码 returns 为空，我可以看到该 ID 位于 DOM 中。为什么 .attr() 方法不接受 "id" 和 "class" 以及如何获取 ID？

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

我看过here，但还是没看出来。有什么想法吗，谢谢？

更新：

一个建议是将 SVG 附加到 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 标签的树图。这里是官方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.

如何通过 Class Select 元素并在 D3 中检索其 ID

How to Select Element by Class and Retrieve its ID in D3

javascript

d3.js