Is it possible for dagre to be responsive?

Community Help
1

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

2

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
3

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