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');返回预期的“节点”。但是，该元素上的ID是城市的名称，上面的JavaScript代码返回null，我可以看到DOM中存在ID。为什么.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 rect中拥有SVG div; rects需要嵌套在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。

如何逐个选择元素并在D3中检索其ID

1 个答案: