diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/git-deps.css | 4 | ||||
| -rw-r--r-- | html/git-deps.html | 2 | ||||
| -rw-r--r-- | html/js/git-deps-graph.js | 20 |
3 files changed, 22 insertions, 4 deletions
diff --git a/html/git-deps.css b/html/git-deps.css index 8d6abaa..261499a 100644 --- a/html/git-deps.css +++ b/html/git-deps.css @@ -1,3 +1,7 @@ +.background { + fill: white; +} + .node { stroke: #fff; stroke-width: 1.5px; diff --git a/html/git-deps.html b/html/git-deps.html index 1051e06..46fafe9 100644 --- a/html/git-deps.html +++ b/html/git-deps.html @@ -16,6 +16,6 @@ <body> <h1>git commit dependency graph</h1> - <p>Some text probably goes here.</p> + <p>Use mouse-wheel to zoom. Drag background to pan.</p> </body> </html> diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index 5deee7d..9b5deea 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -16,6 +16,20 @@ function draw_graph () { .attr("width", width) .attr("height", height); + svg.append('rect') + .attr('class', 'background') + .attr('width', "100%") + .attr('height', "100%") + .call(d3.behavior.zoom().on("zoom", redraw)); + + var fg = svg.append('g'); + + function redraw() { + fg.attr("transform", + "translate(" + d3.event.translate + ")" + + " scale(" + d3.event.scale + ")"); + } + d3.json("test.json", function (error, graph) { var nodeRadius = 5; @@ -29,7 +43,7 @@ function draw_graph () { .start(10,20,20); // define arrow markers for graph links - svg.append('svg:defs').append('svg:marker') + fg.append('svg:defs').append('svg:marker') .attr('id', 'end-arrow') .attr('viewBox', '0 -5 10 10') .attr('refX', 6) @@ -40,12 +54,12 @@ function draw_graph () { .attr('d', 'M0,-5L10,0L0,5') .attr('fill', '#000'); - var path = svg.selectAll(".link") + var path = fg.selectAll(".link") .data(graph.links) .enter().append('svg:path') .attr('class', 'link'); - var node = svg.selectAll(".node") + var node = fg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") |