選擇D3.js中拖動元素下方的元素

我想選擇拖動元素下方的元素，並拖動WHILE 。選擇應該使用鼠標光標完成，不需要邊界檢查拖動的對象，只需要正常的mouseover事件。選擇D3.js中拖動元素下方的元素

示例代碼：

<!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>

怎麼辦呢？

.on("mouseenter", function() {d3.select(this)... })

不起作用，因爲對象是被拖動對象的下面，所以onHover選項/ OnMouseEnter在/等事件不激活，我需要他們激活

來源

2017-06-26 ace196

一種方式來完成，這是計算圓的中心之間的距離：

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

工作小提琴這裏：https://jsfiddle.net/5n6xxhj6/1/

來源

2017-06-26 16:13:44 disperse

它的工作原理，同時還有屏幕上的元素的數量很少。對於超過10個元素的性能明顯下降。儘管如此，爲我工作。謝謝！ – ace196

是的，您在拖動時循環了圓形元素，因此不能很好地縮放。 – disperse

選擇D3.js中拖動元素下方的元素

回答

相關問題