diff options
| author | Peter Wu <peter@lekensteyn.nl> | 2014-05-21 12:46:36 +0200 |
|---|---|---|
| committer | Peter Wu <peter@lekensteyn.nl> | 2014-05-21 12:46:36 +0200 |
| commit | 830dd5e5d40ed39b435c8d0ab2a834c7abfaf7a0 (patch) | |
| tree | 374b869d4cac54ec2fc1bc5d0abfd18051df6d8c | |
| parent | dd6e5fbbb759a37262dff252ec20013f25c19546 (diff) | |
| download | d3viz-830dd5e5d40ed39b435c8d0ab2a834c7abfaf7a0.tar.gz | |
Color neighbors on hover
| -rw-r--r-- | bubble.html | 8 | ||||
| -rw-r--r-- | bubble.js | 19 | ||||
| -rw-r--r-- | preprocess.js | 3 |
3 files changed, 29 insertions, 1 deletions
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; +} </style> <body> @@ -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); }); } |