d3 通过 id 获取 rect 属性

Question

在尝试选择 svg 中 rect 对象的属性时，我遇到了一个问题。 这是我想从中获取值的矩形：

<rect id="2" x="13.761467889908257" y="50" width="49.31192660550459" height="50" fill="rgb(43,0,0)"></rect>

为了计算另一个矩形的 x 位置，我需要 x 值。

我尝试了一些不同的想法，例如：

svg.selectAll("rect")
   .select("id",2);               // 1st version
   .select("id","2");             // 2nd version
   .select("#2");                 // found in another d3 tutorial -> not working for me

还有更多。 有什么办法吗？

// 如果您需要更多我的代码，只需将其写在评论中我不确定要写多少才能不写太多

Answer 1

根据 HTML 4，id 不能以数字开头。 HTML 5 确实改变了这一点，但 CSS 和 d3 仍然不真正支持这一点。因此，如果没有必要，将 id 值更改为不以数字开头可能会更容易。这个问题是我认为#2 选择器不起作用的原因。

如果您确实想保留id = 2，您可以使用属性选择器在一行中完成，如下所示：

svg.select("rect[id='2']")

您可以阅读 Mike Bostock 所说的关于 id 以数字开头的内容 here。

然后，一旦您做出选择，只需执行.attr("x")。

Answer 2

尝试直接调用 d3.select('#2');