react-d3-graph

react-d3-graph copied to clipboard

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 lines
• snapToGrid: Whether or not to snap to grid lines
• gridWidth: Distance between each main grid line on the X axis
• gridHeight: Distance between each main grid line on the Y axis
• strokeWidth: How thick each main grid line is
• strokeColor: Color of main grid lines
• innerGridXDivisions: How many divisions to make between each major grid line on the X axis
• innerGridYDivisions: How many divisions to make between each major grid line on the Y axis
• innerGridStrokeWidth: How thick the inner grid lines are
• innerGridStrokeColor: 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