https://github.com/hubgit/d3-force
Polymer web component for D3's force layout, with dynamic data loading
https://github.com/hubgit/d3-force
Last synced: 7 months ago
JSON representation
Polymer web component for D3's force layout, with dynamic data loading
- Host: GitHub
- URL: https://github.com/hubgit/d3-force
- Owner: hubgit
- Created: 2015-01-31T11:59:56.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-02-15T20:26:18.000Z (almost 11 years ago)
- Last Synced: 2025-06-28T00:45:56.416Z (8 months ago)
- Language: CSS
- Homepage: http://git.macropus.org/d3-force/components/d3-force/demo.html
- Size: 738 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# d3-force
[Demo](http://git.macropus.org/d3-force/components/d3-force/demo.html)
## Notes
* The layout uses DOM nodes rather than SVG. This makes the node templates easier, but means that only the nodes are drawn, and not the links between them.
* The nodes are positioned using CSS 3D transforms, so are composited using the GPU. This means that rendering the nodes takes a minimal amount of time - nearly all of the speed decrease as the graph gets larger is due to the graph layout calculation.
* By over-riding the `graph.node` function, Polymer elements can be used as nodes: see [this demo](http://git.macropus.org/d3-force/components/d3-force/demo-polymer.html).
## Nodes
1. Every object must have an `id` (used to identify the object) and a `name` (for displaying the object).
2. Each link must have a `source` and a `target` object.
3. Links can be added to the graph by passing an array of links to `addLinks`, or by overriding the `expand` function and returning a Promise.
4. Nodes are added to the graph automatically.
## Getting started
```bash
bower install --save hubgit/d3-force
```
```html
window.addEventListener('polymer-ready', function(e) {
var graph = document.querySelector('d3-force');
// when a node is clicked, add more links
graph.expand = function(source) {
return new Promise(function(respond, reject) {
var request = new XMLHttpRequest();
request.open('GET', source.href + '/related-artists');
request.responseType = 'json';
request.onload = function() {
respond(this.response.artists.map(function(artist) {
return ({
source: source,
target: artist
});
}));
};
request.send();
});
}
// start with a seed node
// every node must have an id and a name
graph.click({
id: '6WoTvA9qinpHtSRJuldYh6',
name: 'The Fall',
href: 'https://api.spotify.com/v1/artists/6WoTvA9qinpHtSRJuldYh6',
popularity: 52
});
});
```