From 3ad8021a6580f467235bd54d630e53fbe7470410 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 2 Jan 2023 12:17:23 -0500 Subject: [PATCH] Update d3-state-visualizer docs --- packages/d3-state-visualizer/README.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/d3-state-visualizer/README.md b/packages/d3-state-visualizer/README.md index b74dc149..18793765 100644 --- a/packages/d3-state-visualizer/README.md +++ b/packages/d3-state-visualizer/README.md @@ -35,7 +35,7 @@ const render = tree(document.getElementById('root'), { isSorted: false, widthBetweenNodesCoeff: 1.5, heightBetweenNodesCoeff: 2, - style: { border: '1px solid black' }, + chartStyles: { border: '1px solid black' }, tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }, }); @@ -59,9 +59,9 @@ This chart is a bit special as it accepts either one of the two following option Other options are listed below and have reasonable default values if you want to omit them: | Option | Type | Default | Description | -| ------------------------- | ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|---------------------------| ------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | String | `'d3svg'` | Sets the identifier of the SVG element —i.e your chart— that will be added to the DOM element you passed as first argument | -| `style` | Object | `{}` | Sets the CSS style of the chart | +| `chartStyles` | Object | `{}` | Sets the CSS style of the chart | | `size` | Number | `500` | Sets size of the chart in pixels | | `aspectRatio` | Float | `1.0` | Sets the chart height to `size * aspectRatio` and [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) in order to preserve the aspect ratio of the chart. [Great video](https://www.youtube.com/watch?v=FCOeMy7HrBc) if you want to learn more about how SVG works | | `widthBetweenNodesCoeff` | Float | `1.0` | Alters the horizontal space between each node | @@ -74,12 +74,6 @@ Other options are listed below and have reasonable default values if you want to More to come... -## Bindings - -### React - -[example](https://github.com/reduxjs/redux-devtools/tree/master/packages/d3-state-visualizer/examples/react-tree) implementation. - ## Roadmap - Threshold for large arrays so only a single node is displayed instead of all the children. That single node would be exclude from searching until selected.