Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/another-guy/use-d3
React hooks for D3.js data visualization library.
https://github.com/another-guy/use-d3
d3 d3js d3js-hook d3js-hooks data-visualization data-viz react react-hook react-hooks reactjs
Last synced: 12 days ago
JSON representation
React hooks for D3.js data visualization library.
- Host: GitHub
- URL: https://github.com/another-guy/use-d3
- Owner: another-guy
- License: mit
- Created: 2020-06-07T10:28:26.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T08:12:11.000Z (almost 2 years ago)
- Last Synced: 2024-10-13T04:12:20.116Z (26 days ago)
- Topics: d3, d3js, d3js-hook, d3js-hooks, data-visualization, data-viz, react, react-hook, react-hooks, reactjs
- Language: TypeScript
- Size: 1020 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# `use-d3`
React hooks for D3.js data visualization library.
Please make sure to follow our [Code of Conduct](./CODE_OF_CONDUCT.md).
Code of `use-d3` and the package are distributed under [MIT License](./LICENSE) terms.
## Installation
| yarn | npm |
| ----------------- | --------------------------- |
| `yarn add use-d3` | `npm install --save use-d3` |
## Usage
### `useSelectionWithData` hook
Renders static or dynamic data by mapping data points into SVG DOM elements.
#### Parameters
* `svgRef` — ref object corresponding to the SVG-container.
* `svgTag` — valid SVG tag to render for each data point.
* `cssClassName` — CSS class to apply to each generated SVG tag. **IMPORTANT:** this class has to be unique among all calls of any `use-d3` hooks!
* `data` — array with the data points to map into svg tags.
* `plotImplementation` — code that consumes the generated D3 selection and assigns new attributes to each generated SVG tag.
#### Example
```tsx
import { useSelectionWithData } from 'use-d3';
export const TestComponent: React.FC<{}> = props => {
const svgRef: React.RefObject = useRef(null);
const data = [1, 4, 9, 16, 25];
useSelectionWithData(
svgRef,
'text',
'data-point',
data,
selection => selection
.attr('x', d => 0)
.attr('y', (d, i) => 15 * (i + 1))
.attr('width', d => d * 10)
.attr('height', 10)
.attr('fill', 'red'),
// [ data.length ] <-- Any additional dependencies besides `data`
// whose changes should result in an update/re-render.
);
return ();
};
```
Rendered result DOM.
```html
```
Appearance of the rendered HTML.
### `useSelectionWithoutData` hook
Consumes a D3 selection exactly once without implicitly generating any SVG DOM elements.
This is useful in scenarios like creation of unique reusable definitions which don't depend on any data.
#### Parameters
* `svgRef` — ref object corresponding to the SVG-container.
* `plotImplementation` — code that consumes the generated D3 selection.
#### Example
```tsx
import { useSelectionWithoutData } from 'use-d3';
export const TestComponent: React.FC<{}> = props => {
const svgRef: React.RefObject = useRef(null);
useSelectionWithoutData(
svgRef,
svg => {
const defs = select(svg).append('defs');
defs
.append('pattern')
.attr('id', 'HashLine')
.attr('width', '3')
.attr('height', '3')
.attr('patternUnits', 'userSpaceOnUse')
.attr('patternTransform', 'rotate(37)')
.append('rect')
.attr('width', '1.5')
.attr('height', '3')
.attr('transform', 'translate(0,0)')
.attr('fill', 'silver');
}
);
return ();
};
```
Rendered result DOM.
```html
```
When the pattern is used in a `` tag like this
```html
```
the result rectangle appears shaded.
