在某些情况下，其中节点和边过多。它是复杂工作流程的可视化表示，我们希望在鼠标悬停在节点上时向其显示用户说明
我正在使用Arbor Javascript显示节点和边的图形。在图形中，我想在鼠标悬停在该节点上时立即显示该节点的描述。这是我的代码：
<script src="https://www.technologyscout.net/graphs/common/jquery-2.1.3.js"></script>
<script src="https://www.technologyscout.net/graphs/common/arbor.js"></script>
<script src="https://www.technologyscout.net/graphs/common/arbor-tween.js"></script>
<canvas id="viewport" width="800" height="500"></canvas>
<script type="text/javascript">
(function ($) {
var Renderer = function (canvas) {
var canvas = $(canvas).get(0);
var ctx = canvas.getContext("2d");
var particleSystem;
var that = {
init: function (system) {
particleSystem = system;
particleSystem.screenSize(canvas.width, canvas.height);
particleSystem.screenPadding(100);
that.initMouseHandling()
},
redraw: function () {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
particleSystem.eachEdge(function (edge, pt1, pt2) {
ctx.strokeStyle = edge.data.linkcolor;
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(pt1.x, pt1.y);
ctx.lineTo(pt2.x, pt2.y);
ctx.stroke();
});
particleSystem.eachNode(function (node, pt) {
ctx.beginPath();
ctx.arc(pt.x, pt.y, 15, 0, 2 * Math.PI);
ctx.fillStyle = node.data.nodecolor;
ctx.fill();
ctx.font = "18px Arial";
ctx.fillStyle = "#000000";
ctx.fillText(node.data.name, pt.x + 20, pt.y + 5);
});
},
initMouseHandling: function () {
var dragged = null;
var handler = {
clicked: function (e) {
var pos = $(canvas).offset();
_mouseP = arbor.Point(e.pageX - pos.left, e.pageY - pos.top);
dragged = particleSystem.nearest(_mouseP);
if (dragged && dragged.node !== null) {
dragged.node.fixed = true;
}
$(canvas).bind('mousemove', handler.dragged);
$(window).bind('mouseup', handler.dropped);
return false;
},
dragged: function (e) {
var pos = $(canvas).offset();
var s = arbor.Point(e.pageX - pos.left, e.pageY - pos.top);
if (dragged && dragged.node !== null) {
var p = particleSystem.fromScreen(s);
dragged.node.p = p
}
return false;
},
dropped: function (e) {
if (dragged === null || dragged.node === undefined) return;
if (dragged.node !== null) dragged.node.fixed = false;
dragged.node.tempMass = 1000;
dragged = null;
$(canvas).unbind('mousemove', handler.dragged);
$(window).unbind('mouseup', handler.dropped);
_mouseP = null;
return false;
}
};
$(canvas).mousedown(handler.clicked);
}
}
return that;
}
$(document).ready(function () {
var sys = arbor.ParticleSystem(900, 900, 0.2);
sys.renderer = Renderer("#viewport");
sys.addNode('Node 1', {name: " Main Client", nodecolor: "#88cc88"});
sys.addNode('Node 2', {name: " Client 2", nodecolor: "#888888"});
sys.addNode('Node 3', {name: " Client 3", nodecolor: "#888888"});
sys.addNode('Node 4', {name: " Client 4", nodecolor: "#888888"});
sys.addNode('Node 5', {name: " Client 5", nodecolor: "#888888"});
sys.addNode('Node 6', {name: "Client 6", nodecolor: "#888888"});
sys.addNode('Node 9', {name: "Client 6", nodecolor: "#888888"});
sys.addNode('Node 7', {name: "Node 7", nodecolor: "#888888"});
sys.addEdge('Node 1', 'Node 3', {linkcolor: "red"});
sys.addEdge('Node 1', 'Node 2', {linkcolor: "#888888"});
sys.addEdge('Node 2', 'Node 5', {linkcolor: "#ff8888"});
sys.addEdge('Node 2', 'Node 4', {linkcolor: "#ff8888"});
sys.addEdge('Node 4', 'Node 5', {linkcolor: "#ff8888"});
sys.addEdge('Node 5', 'Node 6', {linkcolor: "#888888"});
sys.addEdge('Node 1', 'Node 7', {linkcolor: "#888888"});
sys.addEdge('Node 4', 'Node 3', {linkcolor: "green"});
sys.addEdge('Node 6', 'Node 7', {linkcolor: "green"});
sys.addEdge('Node 2', 'Node 6', {linkcolor: "green"});
sys.addEdge('Node 5', 'Node 9', {linkcolor: "green"});
})
})(this.jQuery);
</script>