Question

我有一个使用d3创建的标记。

<g transform="translate(441,114)">
    <rect x="50" y="-30" width="50" height="60" id="yesDecision" class="hoverNodeundefined" style="fill: rgb(51, 110, 123);"></rect>
    <text x="80" y="0" class="id ">Yes</text>
    <circle class="node fixed" r="58" style="fill: rgb(30, 139, 195); stroke: rgb(21, 97, 136);" transform="scale(1.0)"></circle>
    <text x="0" y="20" class="id">Segment</text>
    <rect class="edit-event node-hover-button" x="-20" y="-70" height="29" width="29" rx="15" ry="15"></rect>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icon-segment.svg" width="30" height="30" x="-15" y="-30" class="id"></image>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="edit-automation.svg" width="16" height="16" x="-14" y="-65" class="edit-event-image node-hover-button"></image>
    <rect class="delete-event node-hover-button" x="-54" y="-54" height="29" width="29" rx="15" ry="15"></rect>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="trash-automation.svg" width="20" height="20" x="-50" y="-50" class="delete-event-image node-hover-button"></image>
</g>

我在class node的circle元素上有一个mouseover事件。我试图隐藏并在圆圈悬停时用类node-hover-elements显示圆圈的兄弟元素。 d3中的函数是否与jquery中的siblings()类似？

此外，还会有多个此类g元素。我只希望在悬停时显示此元素的兄弟姐妹。

Answer 1

对于D3答案：您可以选择父节点......

(.*)

...然后用给定的类选择其中的所有内容：

d3.select(this.parentNode)

之后，您可以使用该选择做任何您想做的事情。例如，改变兄弟姐妹的不透明度：

＆＃13;

d3.select(this.parentNode).selectAll(".node-hover-button")

＆＃13;

d3.selectAll(".node-hover-button").attr("opacity", 0).attr("pointer-events", "none");
d3.select("circle").on("mouseover", function() {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
    d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
});

＆＃13;

Answer 2

虽然d3没有像jQuery's兄弟姐妹这样的内置方法，但只需一点点javascript即可轻松实现。

var children = node.parentNode.childNodes[]  # Gets all child nodes

# Now iterate over all of these nodes
for (var i = 0; i < children.length; i++) {
    if (children[i].getAttribute("id") != "id_im_looking_for" {
        d3.select("parent > *:eq(" + i + ")");             # Use d3 select
    }
}

当然，您可以根据代码定制此算法。

在d3中选择形状的兄弟

2 个答案: