设置组的位置

时间:2013-10-11 01:26:23

标签: javascript svg d3.js

一个新手问题。正如我在前一篇文章中所解释的那样,我将从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,我看不到对组的方法和属性的引用对象。在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

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

使用d3定位元素的方法是 1.按照您指定的ID选择它 2.将其transform属性设置为translate([some-x], [some-y])

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

P.S。 transform属性也是缩放和旋转组的方法。

相关问题