Is it possible for dagre to be responsive?

Hi Community.

I notice that in @mbostock 's How Observable Runs notebook, he is able to make Graphviz responsive by referencing the built-in width from the Observable standard library, allowing the chart to be updated automatically if the window is resized.

Is the same sort of thing also possible with Dagre-D3?

I have been searching around the Internet in the hopes of finding a way to render a Dagre chart into a <div> element within a Bootstrap row / column so that the graph produced fits the available view – but with no success. In all the examples I’m finding, the Dagre graph seems to decide for itself how big or small it wants to be. Some allow user controls that would zoom out to a specific size, but this is not ideal.

Any leads?

Thanks in advance for your time and guidance!

Sincerely,

Aaron

You can add a scale command to the transform attribute of the svg element using d3; try replacing these lines in the main cell of the “Hello, Dagre!” notebook:

  svg.append("g")
      .call(new dagred3.render(), graph)
      .attr("transform", `translate(${(width - graph.graph().width) / 2},20)`);

with this:

svg.append("g")
      .call(new dagred3.render(), graph)
      .attr("transform", `scale(${(width > 1000) ? 1 : width/1000}) translate(${(width - graph.graph().width) / 2},20)`);

I haven’t yet tried to optimize the scale and translate commands but hopefully this is a start…

2 Likes

Thank you @bgchen. That did the trick! My previous attempts to adjust the scale only seemed to be affecting the viewport (with the underlying chart remaining a constant size). Thanks for showing how to make the chart itself responsive!!

1 Like