问题与鼠标和鼠标出d3.js [英] Issue with mouse over and mouse out d3.js
本文介绍了问题与鼠标和鼠标出d3.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码：
我有两个小圆圈出现在大圆圈的鼠标移动。我遇到的问题是 - 当我将鼠标移动到较小的圆圈它会消失，从堆栈溢出发现，添加 pointer-events：none 将停止此。但我需要绑定这些圈子上的点击事件。这个问题有没有什么工作？
d3.selectAll节点悬停按钮）。attr（opacity，0）; d3.select（circle）。on（mouseover，function（）{d3.select（this.parentNode）.selectAll -hover-button）。attr（opacity，1）;}）。on（mouseout，function（）{d3.select（this.parentNode）.selectAll（。node-hover-button）。 attr（opacity，0）;}）; //在.node-hover-button上附加一个click事件。
< script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js>< / script>< svg> < g transform =translate（100,50）> < rect x =50y = - 30width =50height =60id =yesDecisionclass =hoverNodeundefinedstyle =fill：rgb（51，110，123）; ;< / rect> < text x =80y =0class =id>是< / text> < circle class =node fixedr =58style =fill：rgb（30,139,195）; stroke：rgb（21,97,136）; transform =scale（1.0）>< / circle> < text x =0y =20class =id>段< / text> < rect class =edit-event node-hover-buttonx = - 20y = - 70height =29width =29rx =15ry =15>< ; / rect> < rect class =delete-event node-hover-buttonx = - 54y = - 54height =29width =29rx =15ry =15>< ; / rect> < / g>< / svg>
解决方案
解决此问题的两种可能方法。
- 使用d3活动的 toElement 属性。
-
< g>元素中的大圆圈。
方法1：
d3。 selectAll（。node-hover-button）。attr（opacity，0）; d3.select（circle）。on（mouseover，function（）{d3.select（this.parentNode）.selectAll （mouseout，function（）{var sCircle1 = d3.selectAll（。node-hover-button）[node-hover-button 0] [0]; var sCircle2 = d3.selectAll（。node-hover-button）[0] [1]; if（d3.event.toElement！= sCircle1& d3.event.toElement！ sCircle2）{d3.select（this.parentNode）.selectAll（。node-hover-button）。attr（opacity，0）;}}）; //在.node-hover- 。
< script src =https：// cdnjs .cloudflare.com / ajax / libs / d3 / 3.4.7 / d3.min.js>< / script>< svg> < g transform =translate（100,50）> < rect x =50y = - 30width =50height =60id =yesDecisionclass =hoverNodeundefinedstyle =fill：rgb（51，110，123）; ;< / rect> < text x =80y =0class =id>是< / text> < circle class =node fixedr =58style =fill：rgb（30,139,195）; stroke：rgb（21,97,136）; transform =scale（1.0）>< / circle> < text x =0y =20class =id>段< / text> < rect class =edit-event node-hover-buttonx = - 20y = - 70height =29width =29rx =15ry =15>< ; / rect> < rect class =delete-event node-hover-buttonx = - 54y = - 54height =29width =29rx =15ry =15>< ; / rect> < / g>< / svg>
方法2：
d3.selectAll （.node-hover-button）。attr（opacity，0）; d3.select（。nodes）。on（mouseover，function（）{d3.select（this.parentNode）.selectAll （.node-hover-button）。attr（opacity，1）;}）。on（mouseout，function（）{d3.select（this.parentNode）.selectAll按钮）。attr（opacity，0）;}）; //在.node-hover-button上附加一个点击事件< script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js >< / script>< svg> < g transform =translate（100,50）> < rect x =50y = - 30width =50height =60id =yesDecisionclass =hoverNodeundefinedstyle =fill：rgb（51，110，123）; ;< / rect> < g class =nodes> < text x =80y =0class =id>是< / text> < circle class =node fixedr =58style =fill：rgb（30,139,195）; stroke：rgb（21,97,136）; transform =scale（1.0）>< / circle> < text x =0y =20class =id>段< / text> < rect class =edit-event node-hover-buttonx = - 20y = - 70height =29width =29rx =15ry =15>< ; / rect> < rect class =delete-event node-hover-buttonx = - 54y = - 54height =29width =29rx =15ry =15>< ; / rect> < / g> < / g>< / svg>
I have the following code:
I have two small circles appearing on mouseover of large circle. The problem I face is - when I move mouse over to the smaller circles it will disappear, from stack overflow found out that adding pointer-events:none will stop this. But I need to bind click events on these circles. Is there any work around for this issue ?
d3.selectAll(".node-hover-button").attr("opacity", 0);
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);
});
//attach a click event on .node-hover-button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/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>
解决方案
The two possible ways to resolve this issue.
- Using toElement property of d3 event.
- Group smaller circles and big circle within a separate
<g>element.
Method 1:
d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select("circle").on("mouseover", function() {
d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 1);
}).on("mouseout", function() {
var sCircle1 = d3.selectAll(".node-hover-button")[0][0];
var sCircle2 = d3.selectAll(".node-hover-button")[0][1];
if (d3.event.toElement != sCircle1 && d3.event.toElement != sCircle2) {
d3.select(this.parentNode).selectAll(".node-hover-button").attr("opacity", 0);
}
});
//attach a click event on .node-hover-button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/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>
Method 2:
d3.selectAll(".node-hover-button").attr("opacity", 0);
d3.select(".nodes").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);
});
//attach a click event on .node-hover-button.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/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>
<g class="nodes">
<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>
</g>
</svg>
这篇关于问题与鼠标和鼠标出d3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
