diff options
| -rw-r--r-- | html/git-deps.css | 15 | ||||
| -rw-r--r-- | html/js/git-deps-graph.js | 38 |
2 files changed, 41 insertions, 12 deletions
diff --git a/html/git-deps.css b/html/git-deps.css index 261499a..6f6fbe0 100644 --- a/html/git-deps.css +++ b/html/git-deps.css @@ -3,8 +3,19 @@ } .node { - stroke: #fff; - stroke-width: 1.5px; + /* stroke: black; */ + stroke: #e5e5e5; + stroke-width: 2px; + cursor: move; + fill: #f2f2ff; +} + +.label { + fill: black; + font-size: 16px; + font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; + text-anchor: middle; + /* cursor: move; */ } .link { diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index 40f8cca..d3fb93e 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -59,18 +59,36 @@ function draw_graph () { .enter().append('svg:path') .attr('class', 'link'); + var margin = 10, pad = 10; var node = fg.selectAll(".node") - .data(graph.nodes) - .enter().append("circle") - .attr("class", "node") - .attr("r", nodeRadius) - .style("fill", function (d) { return color(d.group); }) - .call(d3cola.drag); + .data(graph.nodes) + .enter().append("rect") + .attr("class", "node") + .attr("rx", 5).attr("ry", 5) + .call(d3cola.drag); - node.append("title") - .text(function (d) { return d.name; }); + var label = fg.selectAll(".label") + .data(graph.nodes) + .enter().append("text") + .attr("class", "label") + .text(function (d) { return d.name; }) + .call(d3cola.drag) + .each(function (d) { + var b = this.getBBox(); + var extra = 2 * margin + 2 * pad; + d.width = b.width + extra; + d.height = b.height + extra; + }); + // label.append("title") + // .text(function (d) { return d.name; }); d3cola.on("tick", function () { + node.each(function (d) { d.innerBounds = d.bounds.inflate(-margin); }) + .attr("x", function (d) { return d.innerBounds.x; }) + .attr("y", function (d) { return d.innerBounds.y; }) + .attr("width", function (d) { return d.innerBounds.width(); }) + .attr("height", function (d) { return d.innerBounds.height(); }); + path.each(function (d) { if (isIE()) this.parentNode.insertBefore(this, this); }); @@ -90,8 +108,8 @@ function draw_graph () { return 'M' + sourceX + ',' + sourceY + 'L' + targetX + ',' + targetY; }); - node.attr("cx", function (d) { return d.x; }) - .attr("cy", function (d) { return d.y; }); + label.attr("x", function (d) { return d.x; }) + .attr("y", function (d) { return d.y; }); }); // turn on overlap avoidance after first convergence //cola.on("end", function () { |