https://github.com/idyll-lang/idyll-d3-component
Component base class to make it easy to integrate d3 into Idyll projects
https://github.com/idyll-lang/idyll-d3-component
Last synced: about 1 month ago
JSON representation
Component base class to make it easy to integrate d3 into Idyll projects
- Host: GitHub
- URL: https://github.com/idyll-lang/idyll-d3-component
- Owner: idyll-lang
- License: mit
- Created: 2017-04-09T22:31:43.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-01T21:39:03.000Z (about 3 years ago)
- Last Synced: 2024-10-30T00:54:56.692Z (7 months ago)
- Language: JavaScript
- Homepage: https://idyll-lang.github.io/idyll-d3-component/
- Size: 292 KB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# idyll-d3-component
Component base class to make it easy to integrate d3 into Idyll projects
## Installation
```
npm install --save idyll-d3-component
```
## Usage
```jsx
const D3Component = require('idyll-d3-component');
const d3 = require('d3');
class CustomD3Component extends D3Component {
initialize(node, props) {
// node is a
container,
const svg = d3.select(node).append('svg');
//...
// do something with the data passed in
svg.data(props.data);
}
update(props, oldProps) {
// ...
}
}
module.exports = CustomD3Component;
```
In .idl file:
```
[CustomD3Component data:someArrayOfData /]
```
In order to use this component, you need to define two methods, `initialize` and `update`.
### `iniatialize(node, props)`
The initialize function is called only once when your component first mounts. Use this function to
create any necessary DOM elements and render your component with the initially provided properties.
### `update(props, oldProps)`
This function is called any time the props object changes. Use this function e.g. to update
your component when bound data changes.
## Options
Anything you pass to your component will be available on the props object.
E.g.
In .idl file:
```
[CustomD3Component someProperty:"abc" someOtherProperty:"xyz" /]
```
```jsx
class CustomD3Component extends D3Component {
initialize(node, props) {
// props:
// {
// someProperty: "abc",
// someOtherProperty: "xyz"
// }
//...
}
update(props, oldProps){/**/}
}
module.exports = CustomD3Component;
```
### className
A css class name can be provided.
Sets the className:
```
[CustomD3Component className:"d3-viz" /]
```