From d9084fa462b9a6d909ca87d68c0765325e752a0b Mon Sep 17 00:00:00 2001 From: Nils Schneider Date: Mon, 6 Apr 2015 11:37:52 +0200 Subject: [PATCH] forcegraph: keep objects highlighted on updates --- lib/forcegraph.js | 79 ++++++++++++++++++++++++++++++----------------- 1 file changed, 51 insertions(+), 28 deletions(-) diff --git a/lib/forcegraph.js b/lib/forcegraph.js index 3b926f8..0e1dc74 100644 --- a/lib/forcegraph.js +++ b/lib/forcegraph.js @@ -8,6 +8,7 @@ define(["d3"], function (d3) { var el var doAnimation = false var intNodes = [] + var highlight var LINK_DISTANCE = 70 @@ -97,6 +98,48 @@ define(["d3"], function (d3) { animatePanzoom(translate, scale) } + function updateHighlight(nopanzoom) { + if (highlight !== undefined) + if (highlight.type === "node") { + var n = nodesDict[highlight.o.nodeinfo.node_id] + + if (n) { + link.classed("highlight", false) + node.classed("highlight", function (e) { + return e.o.node === n.o.node && n.o.node !== undefined + }) + + if (!nopanzoom) + panzoomTo([n.x, n.y], [n.x, n.y]) + } + + return + } else if (highlight.type === "link") { + var l = linksDict[linkId(highlight.o)] + + if (l) { + node.classed("highlight", false) + link.classed("highlight", function (e) { + return e.o === l.o && l.o !== undefined + }) + + if (!nopanzoom) { + var x = d3.extent([l.source, l.target], function (d) { return d.x }) + var y = d3.extent([l.source, l.target], function (d) { return d.y }) + panzoomTo([x[0], y[0]], [x[1], y[1]]) + } + } + + return + } + + node.classed("highlight", false) + link.classed("highlight", false) + + if (!nopanzoom) + panzoomTo([0, 0], force.size()) + } + function tickEvent() { link.selectAll("line") .attr("x1", function(d) { return d.source.x }) @@ -263,47 +306,27 @@ define(["d3"], function (d3) { .links(intLinks) .size([diameter, diameter]) + updateHighlight(true) + if (node.enter().size() + link.enter().size() > 0) force.start() } self.resetView = function () { - node.classed("highlight", false) - link.classed("highlight", false) - - panzoomTo([0, 0], force.size()) - + highlight = undefined + updateHighlight() doAnimation = true } self.gotoNode = function (d) { - link.classed("highlight", false) - node.classed("highlight", function (e) { - return e.o.node === d && d !== undefined - }) - - var n = nodesDict[d.nodeinfo.node_id] - - if (n) - panzoomTo([n.x, n.y], [n.x, n.y]) - + highlight = {type: "node", o: d} + updateHighlight() doAnimation = true } self.gotoLink = function (d) { - node.classed("highlight", false) - link.classed("highlight", function (e) { - return e.o === d && d !== undefined - }) - - var l = linksDict[d.id] - - if (l) { - var x = d3.extent([l.source, l.target], function (d) { return d.x }) - var y = d3.extent([l.source, l.target], function (d) { return d.y }) - panzoomTo([x[0], y[0]], [x[1], y[1]]) - } - + highlight = {type: "link", o: d} + updateHighlight() doAnimation = true }