在 D3.js 中选择拖动元素下方的元素 [英] Selecting an element underneath dragged element in D3.js
问题描述
我想选择被拖动元素下方的元素，同时拖着.选择应使用鼠标光标完成，不需要对拖动对象进行边界检查，只需常规鼠标悬停事件即可.
示例代码:
<meta charset="utf-8"><风格>.积极的 {中风:#000；描边宽度:2px；}</风格><svg width="960" height="500"></svg><script src="http://d3js.org/d3.v4.min.js"></script><脚本>var svg = d3.select("svg"),width = +svg.attr("width"),height = +svg.attr("height"),半径 = 32;var circles = d3.range(2).map(function() {返回 {x: Math.round(Math.random() * (width - radius * 2) + radius),y: Math.round(Math.random() * (height - radius * 2) + radius)};});var 颜色 = d3.scaleOrdinal().range(d3.schemeCategory20);svg.selectAll("圆").data(圆圈).enter().append("圆圈").attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; }).attr("r", 半径).style("fill", function(d, i) { return color(i); }).call(d3.drag().on("开始"，拖动开始).on("拖动"，拖动).on("end", dragended));函数拖动开始(d){d3.select(this).raise().classed("active", true);}功能拖动(d){d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);}函数被拖拽(d){d3.select(this).classed("active", false);}怎么做?
.on("mouseenter", function() {d3.select(this)... })不起作用，因为对象在被拖动的对象下面，所以 onhover/onmouseenter/etc 事件不会激活，我需要它们来激活
实现此目的的一种方法是计算圆心之间的距离:
拖拽函数(d) {d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);d3.selectAll("circle").each (function(c) {如果(c ！== d){var distance = Math.sqrt( Math.pow((d3.event.x - c.x), 2) + Math.pow((d3.event.y - c.y), 2) );如果(距离<(半径* 2)){d3.select(this).classed("intersecting", true);} 别的 {d3.select(this).classed("intersecting", false);}}});}在这里工作:https://jsfiddle.net/5n6xxhj6/1/>
I want to select the element that is underneath the dragged element, WHILE dragging. Selection should be done using the mouse cursor, bounds checking on dragged object is not required, just the regular mouseover event.
Example code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
stroke: #000;
stroke-width: 2px;
}
</style>
<svg width="960" height="500"></svg>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(2).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
svg.selectAll("circle")
.data(circles)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", radius)
.style("fill", function(d, i) { return color(i); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("active", false);
}
</script>
How to do it?
.on("mouseenter", function() {d3.select(this)... })
doesn't work since the object is underneath the dragged object, so onhover/onmouseenter/etc events don't activate, and I need them to activate
One way to accomplish this is to calculate the distance between the centers of the circles:
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
d3.selectAll("circle").each (function(c) {
if (c !== d) {
var distance = Math.sqrt( Math.pow((d3.event.x - c.x), 2) + Math.pow((d3.event.y - c.y), 2) );
if (distance < (radius * 2)) {
d3.select(this).classed("intersecting", true);
} else {
d3.select(this).classed("intersecting", false);
}
}
});
}
Working fiddle here: https://jsfiddle.net/5n6xxhj6/1/
这篇关于在 D3.js 中选择拖动元素下方的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
