Add drag and zoom?

[NovasTaylor]

I produced a very large (long and wide) graph using mermaidAPI. How can I add drag (pan) and zoom? Use of another JS library, perhaps?

[AndrewFeeney]

You can change the size of the container with CSS. This will allow the browser's zoom and scrollbar functionality to work.

[wolfie7873]

You can change the size of the container with CSS. This will allow the browser's zoom and scrollbar functionality to work.

Can you please share an example of how to do this?

[AndrewFeeney]

Suppose your chart was contained inside a div element with an id of chart:

<div id="chart">
...
</div>

Then you would just have to explicitly set the size with CSS like so:

<style>
#chart {
    width: 500px;
    height: 500px;
}
</style>

Obviously you would need to adjust the actual pixel sizes to values which made sense for your project.

[tylerlong]

This might help: https://github.com/tylingsoft/dagre-d3-renderer/blob/master/dist/demo/arrows.html#L55-L59

var zoom = d3.zoom().on("zoom", function() {
  inner.attr("transform", d3.event.transform);
});
svg.call(zoom);

[filomat]

Is there a solution for panning canvas in a very wide graph?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you are still interested in it, and it is still relevant, you can comment or remove the label to revive it.

[stale]

This issue has been been automatically closed due to a lack of activity. This is done to maintain a clean list of issues that the community is interested in developing.