javascript - 设置组的位置

Question

一个新手问题。正如我在之前的帖子中所解释的，我从 Flash 来到 SVG Land 时充满了 ActionScript 的期望和误解。

我已经使用 D3 构建了一个交互式图形，并且我几乎完成了，只是我想添加一个小弹出框，当用户将鼠标悬停在某个状态上时会显示该弹出框。现在它显示为舞台左侧标有“西弗吉尼亚”的静态对象：

http://www.50laboratories.com/miscellany/demographicclout2.html

弹出窗口是一个具有自己独特 ID 的组。我需要能够根据悬停的状态设置它的 x 和 y 位置，但到目前为止还不知道如何。在我看来，我应该能够在我的 JavaScript 中处理一个组，就像在 Flash 中处理一个命名的电影剪辑一样，但是访问像这样的 API 参考，https://github.com/mbostock/d3/wiki/API- Reference，我看不到对组对象的方法和属性的引用。在此先感谢您的帮助。

Answer 1

与 actionscript 不同，svg 元素是 dom 节点，操作它们涉及设置它们的属性或样式属性。您可以通过调用 dom 节点的某些属性/样式设置器来操作这些，但由于您使用的是 d3，因此您可以使用 d3 的设置器设置这些属性/样式。

使用 d3 定位元素的方法是 1. 选择它，通过您分配给它的 id 2. 将其transform属性设置为translate([some-x], [some-y])

d3.select("#statepopup").attr("transform", "translate(50,100)");

PS transform 属性也是您可以缩放和旋转组的方式。