我用D3树js创建了树。点是我需要每个树节点的顶部和左侧的值。如何获取树节点的顶部和左侧值？

Question

DOM是：

<g id="51" class="node" transform="translate(0,275)">
<circle class="nodeCircle" r="18" style="fill: rgb(98, 98, 191);">
<circle r="18" style="fill-opacity: 0;">

<text class="nodeText" x="0" dy="2em" text-anchor="middle" style="fill-opacity: 1;" y="18">
<tspan dy="14" x="0">Home</tspan>
</text>
<circle class="ghostCircle" r="18" opacity="0.4" style="fill: red;" pointer-events="mouseover">
</g>

在JQuery中我尝试过

var pos = element.find('circle.nodeCircle').position();

var rad = element.find('circle.nodeCircle').attr('r');

使用pos.left和pos.top我得到树节点的顶部和左侧值。这些值因浏览器而异。任何建议如何获得树节点的确切顶部和左侧值？

Answer 1

试试这个。

方法1：

var node = element.find('circle.nodeCircle')[0];
var left = node.getBBox().x;    
var top = node.getBBox().y;

Read about getBBox method

方法2：

var node = element.find('circle.nodeCircle');
var rad = node.attr('r');
var data = d3.select(node[0]).data();
var left  = data.x-rad;
var top  = data.y-rad;

希望这有帮助。