Optimize the screen space for dependencyBrowseGraph

This commit is contained in:
Guillaume Massé 2020-07-13 15:27:05 -04:00
parent 221e5fb7a1
commit ad3acd86f4
1 changed files with 6 additions and 17 deletions

View File

@ -37,11 +37,10 @@ THE SOFTWARE.
<script src="dependencies.dot.js"></script> <script src="dependencies.dot.js"></script>
<style> <style>
svg { body {
border: 1px solid #999; margin: 0;
overflow: hidden; overflow: hidden;
} }
.node { .node {
white-space: nowrap; white-space: nowrap;
} }
@ -76,8 +75,6 @@ THE SOFTWARE.
<body onLoad="initialize()"> <body onLoad="initialize()">
<h1>Dependencies</h1>
<svg width=1280 height=1024> <svg width=1280 height=1024>
<g/> <g/>
</svg> </svg>
@ -91,6 +88,8 @@ function initialize() {
inner.attr("transform", "translate(" + d3.event.translate + ")" + inner.attr("transform", "translate(" + d3.event.translate + ")" +
"scale(" + d3.event.scale + ")"); "scale(" + d3.event.scale + ")");
}); });
svg.attr("width", window.innerWidth);
svg.call(zoom); svg.call(zoom);
// Create and configure the renderer // Create and configure the renderer
var render = dagreD3.render(); var render = dagreD3.render();
@ -98,21 +97,11 @@ function initialize() {
var g; var g;
{ {
g = graphlibDot.read(inputGraph); g = graphlibDot.read(inputGraph);
// Set margins, if not present g.graph().rankdir = "LR";
if (!g.graph().hasOwnProperty("marginx") &&
!g.graph().hasOwnProperty("marginy")) {
g.graph().marginx = 20;
g.graph().marginy = 20;
g.graph().rankdir = "LR";
}
g.graph().transition = function(selection) {
return selection.transition().duration(500);
};
// Render the graph into svg g
d3.select("svg g").call(render, g); d3.select("svg g").call(render, g);
// Center the graph // Center the graph
var initialScale = 0.75; var initialScale = 0.10;
zoom zoom
.translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20]) .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
.scale(initialScale) .scale(initialScale)