Correctly scale DOT graphic

Please,

I need to create an SVG graphic with D3-GraphViz that size fits perfectly to a DIV area. I tried many this but without success.

Here is a sample code:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>

I saw on D3 website that is a ".fit(true)" property but it simply doesn't work. Any ideas or examples?

Solution

You could do it with CSS, scaling the svg that Graphviz produces up to the size of your master element #graph:

#graph svg {
    height: 100%;
    width: auto;
}

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  #graph {
    /* Just an example */
    height: 250px;
  }
  #graph svg {
    height: 100%;
    width: auto;
  }
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js@1.8.0/viz.js" type="javascript/worker"></script>
<script src="https://unpkg.com/d3-graphviz@1.4.0/build/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .fade(false)
    .renderDot('digraph  {a -> b}');

</script>