<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="600"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d"),
width = canvas.width,
height = canvas.height;
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) {
return d.id;
}))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2));
var graph = {};
graph.nodes = d3.range(100).map(function(d) {
return {
id: d
}
});
graph.links = d3.range(200).map(function(d) {
return {
source: Math.floor(Math.random() * 100),
target: Math.floor(Math.random() * 100)
};
});
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
context.clearRect(0, 0, width, height);
context.beginPath();
graph.links.forEach(drawLink);
context.strokeStyle = "#aaa";
context.stroke();
context.beginPath();
graph.nodes.forEach(drawNode);
context.fill();
context.strokeStyle = "#fff";
context.stroke();
if (closeNode) {
context.beginPath();
drawNode(closeNode)
context.fill();
context.strokeStyle = "#ff0000";
context.stroke();
}
}
var closeNode;
d3.select("canvas").on("mousemove", function(d){
var p = d3.mouse(this);
closeNode = simulation.find(p[0], p[1]);
ticked();
})
function drawLink(d) {
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
}
function drawNode(d) {
context.moveTo(d.x + 3, d.y);
context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}
</script>
event
中的光标位置是否相对于触发事件的元素? - ThePenguin