From 830dd5e5d40ed39b435c8d0ab2a834c7abfaf7a0 Mon Sep 17 00:00:00 2001 From: Peter Wu Date: Wed, 21 May 2014 12:46:36 +0200 Subject: Color neighbors on hover --- bubble.html | 8 +++++++- bubble.js | 19 +++++++++++++++++++ preprocess.js | 3 +++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/bubble.html b/bubble.html index e50fab1..79359d6 100644 --- a/bubble.html +++ b/bubble.html @@ -92,8 +92,11 @@ html, body { .node.ham { fill: green; } +.node.neighbor { + fill: #fcc; +} .node.selected { - fill: red; + fill: #f00; } .link { stroke: #999; @@ -104,6 +107,9 @@ html, body { .arrow-head { fill-opacity: .6; } +.link.neighbor { + stroke: #f99; +} diff --git a/bubble.js b/bubble.js index 7c10f83..8d957b6 100644 --- a/bubble.js +++ b/bubble.js @@ -178,6 +178,8 @@ function processData(data) { }); var infoBox = d3.select('#infobox'); + + // double-click locks selection of a user on hover var selectedNode = null; node.on('dblclick', function (d) { if (selectedNode === d) { @@ -192,14 +194,31 @@ function processData(data) { infoBox.classed('user-locked', selectedNode === d); }) .on('mouseover', function (d) { + console.log('Hovering over', d); // only update on hover if no node is selected if (selectedNode === null) { updateInfobox(d, this); } + // always update neighboring edges + contents.selectAll('.link') + .classed('neighbor', function (edge) { + return edge.source === d || edge.target === d; + }); + // ... and also update neighboring nodes + contents.selectAll('.node') + .classed('neighbor', function (node) { + return node.related.indexOf(d.index) >= 0; + }); + }) + .on('mouseout', function (d) { + contents.selectAll('.neighbor') + .classed('neighbor', false); }); + // info panel for each user node var userInfo = infoPane.select('.user-info'); + // highlight selected node and update the user info in infobox function updateInfobox(d, nodeElm) { // unselect other nodes, mark self as selected. contents.select('.node.selected').classed('selected', false); diff --git a/preprocess.js b/preprocess.js index 831e3cf..904d6be 100644 --- a/preprocess.js +++ b/preprocess.js @@ -74,5 +74,8 @@ function preprocess(data, options) { data.edges.map(function (link) { link.source = userIds_indices[link.source]; link.target = userIds_indices[link.target]; + // for faster lookup, store neighboring nodes per node + data.nodes[link.source].related.push(link.target); + data.nodes[link.target].related.push(link.source); }); } -- cgit v1.2.1