Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add drag and zoom? #535

Closed
NovasTaylor opened this issue May 24, 2017 · 7 comments
Closed

Add drag and zoom? #535

NovasTaylor opened this issue May 24, 2017 · 7 comments
Labels
Type: New Shape Request for new shape

Comments

@NovasTaylor
Copy link

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
Copy link

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

@wolfie7873
Copy link

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
Copy link

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
Copy link
Collaborator

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
Copy link

filomat commented Jun 19, 2019

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

@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot added the Type: New Shape Request for new shape label Sep 24, 2019
@stale
Copy link

stale bot commented Oct 8, 2019

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.

@stale stale bot closed this as completed Oct 8, 2019
@github-actions github-actions bot locked and limited conversation to collaborators Oct 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Type: New Shape Request for new shape
Projects
None yet
Development

No branches or pull requests

5 participants