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'）;

d3通过id获取rect属性

2 个答案: