From bf953e7291acae390e300a640d6c0ec7ff0037bb Mon Sep 17 00:00:00 2001 From: Adam Spiers Date: Wed, 7 Jan 2015 22:07:16 +0000 Subject: split code up into smaller functions --- html/js/git-deps-graph.js | 200 ++++++++++++++++++++++++---------------------- 1 file changed, 105 insertions(+), 95 deletions(-) (limited to 'html') diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index 6fdac68..259de9f 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -10,7 +10,7 @@ var d3cola = cola.d3adaptor() .avoidOverlaps(true) .size([WIDTH, HEIGHT]); -var svg, fg; +var svg, fg, node, path; jQuery(function () { draw_graph(); @@ -55,112 +55,122 @@ function draw_graph () { .attr('d', 'M0,-5L10,0L0,5') .attr('fill', '#000'); - var path = fg.selectAll(".link") + path = fg.selectAll(".link") .data(graph.links) .enter().append('svg:path') .attr('class', 'link'); - var node = fg.selectAll(".node") - .data(graph.nodes) - .enter().append("g") - .attr("class", "node") - .call(d3cola.drag); - - // Initialize tooltip - var tip = d3.tip().attr('class', 'd3-tip').html(tip_html); - fg.call(tip); - // Hide tooltip when we start dragging - d3cola.drag().on('dragstart', tip.hide); - - var rect = node.append("rect") - .attr("rx", 5).attr("ry", 5); - - var label = node.append("text") - .text(function (d) { return d.name; }) - .each(function (d) { - var b = this.getBBox(); - // Calculate width/height of rectangle from text bounding box. - d.rect_width = b.width + 2 * PADDING; - d.rect_height = b.height + 2 * PADDING; - // Now set the node width/height as used by cola for - // positioning. This has to include the margin - // outside the rectangle. - d.width = d.rect_width + 2 * MARGIN; - d.height = d.rect_height + 2 * MARGIN; - }); - // label.append("title") - // .text(function (d) { return d.name; }); - - rect.attr('width', function (d, i) { return d.rect_width; }) - .attr('height', function (d, i) { return d.rect_height; }) - .on('mouseover', tip.show) - .on('mouseout', tip.hide); - - // Centre label - label - .attr("x", function (d) { return d.rect_width / 2; }) - .attr("y", function (d) { return d.rect_height / 2; }) - .on('mouseover', tip.show) - .on('mouseout', tip.hide); - - d3cola.start(10,20,20); - - d3cola.on("tick", function () { - node.each(function (d) { - // cola sets the bounds property which is a Rectangle - // representing the space which other nodes should not - // overlap. The innerBounds property seems to tell - // cola the Rectangle which is the visible part of the - // node, minus any blank margin. - d.innerBounds = d.bounds.inflate(-MARGIN); - }); - - node.attr("transform", function (d) { - return "translate(" + - d.innerBounds.x + "," + - d.innerBounds.y + ")"; - }); - - path.each(function (d) { - if (isIE()) this.parentNode.insertBefore(this, this); - }); - path.attr("d", function (d) { - // Undocumented: https://github.com/tgdwyer/WebCola/issues/52 - cola.vpsc.makeEdgeBetween( - d, - d.source.innerBounds, - d.target.innerBounds, - // This value is related to but not equal to the - // distance of arrow tip from object it points at: - 5 - ); - var lineData = [ - { x: d.sourceIntersection.x, y: d.sourceIntersection.y }, - { x: d.arrowStart.x, y: d.arrowStart.y } - ]; - return lineFunction(lineData); - }); - }); + node = fg.selectAll(".node") + .data(graph.nodes) + .enter().append("g") + .attr("class", "node") + .call(d3cola.drag); - // d3cola.on("end", routeEdges); - - // turn on overlap avoidance after first convergence - // d3cola.on("end", function () { - // if (!d3cola.avoidOverlaps()) { - // graph.nodes.forEach(function (v) { - // v.width = v.height = 10; - // }); - // d3cola.avoidOverlaps(true); - // d3cola.start(); - // } - // }); + draw_nodes(fg, node); }); } +function draw_nodes (fg, node) { + // Initialize tooltip + var tip = d3.tip().attr('class', 'd3-tip').html(tip_html); + fg.call(tip); + // Hide tooltip when we start dragging + d3cola.drag().on('dragstart', tip.hide); + + var rect = node.append("rect") + .attr("rx", 5).attr("ry", 5); + + var label = node.append("text") + .text(function (d) { return d.name; }) + .each(function (d) { + var b = this.getBBox(); + // Calculate width/height of rectangle from text bounding box. + d.rect_width = b.width + 2 * PADDING; + d.rect_height = b.height + 2 * PADDING; + // Now set the node width/height as used by cola for + // positioning. This has to include the margin + // outside the rectangle. + d.width = d.rect_width + 2 * MARGIN; + d.height = d.rect_height + 2 * MARGIN; + }); + // label.append("title") + // .text(function (d) { return d.name; }); + + position_nodes(rect, label, tip); +} + +function position_nodes (rect, label, tip) { + rect.attr('width', function (d, i) { return d.rect_width; }) + .attr('height', function (d, i) { return d.rect_height; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); + + // Centre label + label + .attr("x", function (d) { return d.rect_width / 2; }) + .attr("y", function (d) { return d.rect_height / 2; }) + .on('mouseover', tip.show) + .on('mouseout', tip.hide); + + d3cola.start(10,20,20); + + d3cola.on("tick", tick_handler); + + // d3cola.on("end", routeEdges); + + // turn on overlap avoidance after first convergence + // d3cola.on("end", function () { + // if (!d3cola.avoidOverlaps()) { + // graph.nodes.forEach(function (v) { + // v.width = v.height = 10; + // }); + // d3cola.avoidOverlaps(true); + // d3cola.start(); + // } + // }); +} + function tip_html (d) { return d.describe || d.sha; } +function tick_handler () { + node.each(function (d) { + // cola sets the bounds property which is a Rectangle + // representing the space which other nodes should not + // overlap. The innerBounds property seems to tell + // cola the Rectangle which is the visible part of the + // node, minus any blank margin. + d.innerBounds = d.bounds.inflate(-MARGIN); + }); + + node.attr("transform", function (d) { + return "translate(" + + d.innerBounds.x + "," + + d.innerBounds.y + ")"; + }); + + path.each(function (d) { + if (isIE()) this.parentNode.insertBefore(this, this); + }); + path.attr("d", function (d) { + // Undocumented: https://github.com/tgdwyer/WebCola/issues/52 + cola.vpsc.makeEdgeBetween( + d, + d.source.innerBounds, + d.target.innerBounds, + // This value is related to but not equal to the + // distance of arrow tip from object it points at: + 5 + ); + var lineData = [ + { x: d.sourceIntersection.x, y: d.sourceIntersection.y }, + { x: d.arrowStart.x, y: d.arrowStart.y } + ]; + return lineFunction(lineData); + }); +} + var lineFunction = d3.svg.line() .x(function (d) { return d.x; }) .y(function (d) { return d.y; }) -- cgit