在d3中选择形状的兄弟

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>

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

还会有多个这样的g元素.我只希望在悬停时显示此元素的兄弟姐妹.

Answer 1

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

d3.select(this.parentNode)

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

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

之后,您可以通过该选择做任何您想做的事情.例如,改变兄弟姐妹的不透明度:

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);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
  <g transform="translate(100,50)">
    <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>
    <rect class="delete-event node-hover-button" x="-54" y="-54" height="29" width="29" rx="15" ry="15"></rect>
  </g>
</svg>