отображение потомков родительских узлов при наведении - PullRequest
Новая
       36

отображение потомков родительских узлов при наведении

0 голосов
/ 13 октября 2019

Я использую arbor.js для создания графика.

Как создать событие наведения для узла, показать дочерние узлы при наведении на родительский узел и затем скрыть в беседке.js.

1 Ответ

0 голосов
/ 16 октября 2019

вот мой код: 

(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(700, 700, 0.5);
                sys.renderer = Renderer("#viewport");
                sys.addNode('Node 1', {name: "youtube", nodecolor: "#2EB5E0"});
                sys.addNode('Node 2', {name: "wikipedia", nodecolor: "#2EB5E0"});
                sys.addNode('Node 3', {name: "twitter", nodecolor: "#2EB5E0"});
                sys.addNode('Node 4', {name: "wordpress", nodecolor: "#2EB5E0"});
                sys.addNode('Node 5', {name: "gmpg.org", nodecolor: "#2EB5E0"});
                sys.addNode('Node 6', {name: "blogspost", nodecolor: "#E1C340"});
                sys.addNode('Node 7', {name: "hugedomains", nodecolor: "#E1C340"});
                sys.addNode('Node 8', {name: "linkedin.com", nodecolor: "#E1C340"});
                sys.addNode('Node 9', {name: "w3.org", nodecolor: "#E1C340"});
                sys.addNode('Node 10', {name: "adobe.com", nodecolor: "#E1C340"});
                sys.addNode('Node 11', {name: "flicker.com", nodecolor: "#E1C340"});
                sys.addNode('Node 12', {name: "google.com", nodecolor: "#E1C340"});
                sys.addNode('Node 13', {name: "apple.com", nodecolor: "#E1C340"});
                sys.addNode('Node 14', {name: "yahoo.com", nodecolor: "#E1C340"});
                sys.addEdge('Node 1', 'Node 2', {linkcolor: "#0C6980"});
                sys.addEdge('Node 2', 'Node 3', {linkcolor: "#0C6980"});
                sys.addEdge('Node 3', 'Node 4', {linkcolor: "#0C6980"});
                sys.addEdge('Node 4', 'Node 5', {linkcolor: "#0C6980"});
                sys.addEdge('Node 5', 'Node 1', {linkcolor: "#0C6980"});
                sys.addEdge('Node 1', 'Node 6', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 1', 'Node 7', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 2', 'Node 8', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 2', 'Node 9', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 3', 'Node 10', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 4', 'Node 11', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 4', 'Node 12', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 5', 'Node 13', {linkcolor: "#F8EA8C"});
                sys.addEdge('Node 5', 'Node 14', {linkcolor: "#F8EA8C"});
        })
})(this.jQuery);
...