javascript - 在 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>

我在类为 node 的 circle 元素上有一个鼠标悬停事件。我试图在圆圈悬停时使用 node-hover-elements 类隐藏和显示圆圈的兄弟元素。 d3中有没有类似于jquery中siblings()的函数？

还会有多个这样的 g 元素。我只想在悬停时显示此元素的 sibling 。

Answer 1

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

d3.select(this.parentNode)

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

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

之后，您可以对该选择做任何您想做的事情。例如，改变 sibling 的不透明度:

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>