react-d3-graph
react-d3-graph copied to clipboard
Feature: Grid lines and snap to grid
This adds a new grid set of options that can be used to render grid lines underneath the graph.
The grid has main grid lines and inner grid lines. Snapping to the grid when dragging nodes can be turned on/off.
Grid options:
renderGridLines: Enable/disable grid linessnapToGrid: Whether or not to snap to grid linesgridWidth: Distance between each main grid line on the X axisgridHeight: Distance between each main grid line on the Y axisstrokeWidth: How thick each main grid line isstrokeColor: Color of main grid linesinnerGridXDivisions: How many divisions to make between each major grid line on the X axisinnerGridYDivisions: How many divisions to make between each major grid line on the Y axisinnerGridStrokeWidth: How thick the inner grid lines areinnerGridStrokeColor: Color of the inner grid lines
Using these combined with listening to changes to zoom lets you do really cool stuff when using react-d3-graph, like changing thickness/number of grid lines with the zoom level!

https://user-images.githubusercontent.com/504259/122706725-65d81580-d20d-11eb-9bcd-f1de90c11ce6.mp4
https://user-images.githubusercontent.com/504259/123028912-0f95de80-d395-11eb-81a1-6e033b06bf78.mp4