https://github.com/kieler/klayjs-d3
Bridge for KLayJS and D3.js
https://github.com/kieler/klayjs-d3
Last synced: 23 days ago
JSON representation
Bridge for KLayJS and D3.js
- Host: GitHub
- URL: https://github.com/kieler/klayjs-d3
- Owner: kieler
- License: epl-1.0
- Created: 2014-07-15T12:21:26.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2020-04-14T13:53:57.000Z (about 5 years ago)
- Last Synced: 2025-05-07T13:58:30.900Z (23 days ago)
- Language: JavaScript
- Size: 1.12 MB
- Stars: 61
- Watchers: 12
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
KLayJS-D3
===
A bridge between [KLayJS][klayjs]
and [D3.js](http://d3js.org/).
KLayJS is a layer-based layout algorithm that is especially suited for
node-link diagrams with an inherent direction and ports
(explicit attachment points on a node's border).
Installation
===
Either download the library from the `dist` folder or install using `npm` or `bower`.
```bash
bower install klayjs-d3
```
```bash
npm install klayjs-d3
```
Usage
===
If used within the browser include the library as follows.
You have the option to use a _web worker_ by adding a `-ww` suffix to
the library's name. See the documentation of [KLayJS][klayjs]
for further information on the web worker.
```html
```
There are two options to use the bridge. For simple, flat graphs you can
use the library as you are used from D3. In case your graph is
hierarchical (i.e. nodes can contain nodes), you have to use our
[JSON KGraph][jsonkgraph] format.
As soon as the layout process finished a callback function is invoked.
D3-Style
---
```javascript
var graph = [d3loadjson()];
var layouter = klay.d3adapter()
.size([width, height])
.nodes(graph.nodes)
.links(graph.links)
.start();
[...]
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter()
.append("rect")
.attr("class", "node");
layouter.on("finish", function() {
// [apply positions]
});
```
KGraph
---
```javascript
var graph = [jsonKGrap()];
var layouter = klay.d3kgraph()
.size([width, height])
.kgraph(graph);
[...]
layouter.on("finish", function() {
var nodes = layouter.nodes();
var links = layouter.links(nodes);
svg.selectAll(".node")
.data(nodes, function(d) {return d.id;})
.enter()
.append("rect")
.attr("class", "node");
// [apply positions]
});
```
Examples
===
Running Examples:
- [Ports](http://kieler.github.io/klayjs-d3/examples/ports/)
- [Hierarchy](http://kieler.github.io/klayjs-d3/examples/hierarchy/)
- [Interactive](http://kieler.github.io/klayjs-d3/examples/interactive/)
- [Padding](http://kieler.github.io/klayjs-d3/examples/padding/)
- [Node Label Placement](http://kieler.github.io/klayjs-d3/examples/node_labels/)
- [Miserables](http://kieler.github.io/klayjs-d3/examples/miserables/) (Data From D3 Force Example)
See the `examples` folder.
You can easily run the examples locally using node's http-server.
```bash
bower install
npm install -g http-server
http-server .
[open browser localhost:8080]
```
[klayjs]: https://github.com/Kieler/klayjs
[wiki-klay]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered
[wiki-layopts]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/KLay+Layered+Layout+Options
[jsonkgraph]: http://rtsys.informatik.uni-kiel.de/confluence/display/KIELER/JSON+Graph+Format
[klayjs-d3]: https://github.com/Kieler/klayjs-d3
[d3js]: http://d3js.org/