javascript - 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") 即可。