From dc4f1a3736b77534942f6aa0d7e549f82cfc5276 Mon Sep 17 00:00:00 2001 From: Alon Levy Date: Sun, 12 Apr 2015 18:00:57 +0200 Subject: client/graph_view: make sure links & nodes are always ordered by id --- src/client/view/graph_view.js | 79 ++++++++++++++++++++----------------------- 1 file changed, 36 insertions(+), 43 deletions(-) (limited to 'src') diff --git a/src/client/view/graph_view.js b/src/client/view/graph_view.js index 4041f177..a7d37052 100644 --- a/src/client/view/graph_view.js +++ b/src/client/view/graph_view.js @@ -382,6 +382,14 @@ function GraphView(spec) { return urlValid(d) && image_endings[d.url.slice(d.url.lastIndexOf('.') + 1)] !== undefined; }; + function nodes__visible() { + return graph.nodes().filter(node__is_shown); + } + + function links__visible() { + return graph.links().filter(link__is_shown); + } + function update_view(relayout) { var node, link, @@ -391,7 +399,15 @@ function GraphView(spec) { unselected_selector = '#' + graph_name + ' #link-group', selected_selector = '#' + graph_name + ' #selected-link-group', unselected_link_group = document.querySelector(unselected_selector), - selected_link_group = document.querySelector(selected_selector); + selected_link_group = document.querySelector(selected_selector), + visible_nodes = nodes__visible(), + visible_links = links__visible(); + + function set_data_by_id(d3e, data) { + return d3e.data(data, function (d) { + return d.id; + }); + } var nodeTextX = function(d) { return urlValid(d) ? node_text_dx + node_url_dx : node_text_dx; @@ -408,10 +424,7 @@ function GraphView(spec) { function node_text_setup() { var node_text; - node_text = vis.selectAll("g.nodetext") - .data(graph.nodes(), function(d) { - return d.id; - }); + node_text = set_data_by_id(vis.selectAll("g.nodetext"), visible_nodes); node_text.enter().insert('g') .attr('id', function (d) { return text_node_id(d.id); }) .attr("class", "nodetext graph") @@ -469,8 +482,7 @@ function GraphView(spec) { relayout = (relayout === undefined && true) || relayout; - link = d3.select(unselected_link_group).selectAll("g.link") - .data(graph.links(), function(d) { return d.id; }); + link = set_data_by_id(d3.select(unselected_link_group).selectAll("g.link"), visible_links); // link group - container for paths. Created after text so it is above (see z-order for SVG 1.1) link_g = link.enter() @@ -553,8 +565,7 @@ function GraphView(spec) { link.exit().remove(); - vis.selectAll('g.link') - .data(graph.links()) + set_data_by_id(vis.selectAll('g.link'), visible_links) .each(function (d) { this.link = d; }); @@ -568,8 +579,7 @@ function GraphView(spec) { return name.substring(0, consts.link_text_short_length) + "..."; } - link_text = vis.selectAll(".linklabel") - .data(graph.links(), function(d) { return d.id; }); + link_text = set_data_by_id(vis.selectAll(".linklabel"), visible_links); link_text .text(function(d) { @@ -590,17 +600,13 @@ function GraphView(spec) { link_text.exit().remove(); - node = vis.selectAll(".node") - .data(graph.nodes(), function(d) { - return d.id; - }); + node = set_data_by_id(vis.selectAll(".node"), visible_nodes); node_text_setup(); var nodeEnter = node.enter() .append("g") .attr('id', function(d){ return d.id; }) // append node id to enable data->visual mapping - .attr('display', 'none') // made visible on first tick .call(drag); node.attr('class', function(d) { @@ -743,10 +749,7 @@ function GraphView(spec) { } function layout__load_graph() { - var nodes_subset = graph.nodes().filter(node__is_shown), - links_subset = graph.links().filter(link__is_shown); - - layout.nodes_links(nodes_subset, links_subset); + layout.nodes_links(nodes__visible(), links__visible()); } function segment_in_segment(inner_low, inner_high, outer_low, outer_high) @@ -1039,17 +1042,19 @@ function GraphView(spec) { * bubble animation. */ function tick(e) { - var node = vis.selectAll(".node") - .data(graph.nodes(), function(d) { + var visible_nodes = nodes__visible(), + visible_links = links__visible(), + node = vis.selectAll(".node") + .data(visible_nodes, function(d) { return d.id; - }); - var link = vis.selectAll("path.link") - .data(graph.links(), function(d) { + }), + link = vis.selectAll("path.link") + .data(visible_links, function(d) { return d.id; - }); - var link_text = vis.selectAll(".linklabel").data(graph.links()); - var node_text = vis.selectAll("g.nodetext").data(graph.nodes()); - var bubble_radius = selection.is_empty() || temporary ? gv.bubble_radius : selection_outer_radius; + }), + link_text = vis.selectAll(".linklabel").data(visible_links), + node_text = vis.selectAll("g.nodetext").data(visible_nodes), + bubble_radius = selection.is_empty() || temporary ? gv.bubble_radius : selection_outer_radius; if (temporary) { // XXX convert to a layout @@ -1057,7 +1062,7 @@ function GraphView(spec) { } // XXX This computes every node ignoring filter. - graph.nodes().forEach(function (d) { + visible_nodes.forEach(function (d) { if (check_for_nan(d.x) || check_for_nan(d.y)) { return; } @@ -1119,18 +1124,6 @@ function GraphView(spec) { return b.py == a.py ? (b.px == a.px ? 0 : (b.px > a.px ? -1 : 1)) : (b.py > a.py ? -1 : 1); }) .attr('tabindex', function(d, i) { return i + 100; }); - - // After initial placement we can make the nodes visible. - [node, node_text].forEach(function (list) { - list.attr('display', function (d, i) { - return node__is_shown(d) ? '' : 'none'; - }); - }); - [link, link_text].forEach(function (list) { - link.attr('display', function (d, i) { - return link__is_shown(d) ? '' : 'none'; - }); - }); } // SVG rendering order is last rendered on top, so to make sure @@ -1242,7 +1235,7 @@ function GraphView(spec) { .size([w, h]) .on("tick", pushRedraw) .on("end", record_position_to_local_storage) - .nodes_links(graph.nodes(), graph.links()) + .nodes_links(nodes__visible(), links__visible()) .restore() .start(); } -- cgit v1.3.1