Awesome
KLayJS-D3
A bridge between KLayJS and D3.js.
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
.
bower install klayjs-d3
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
for further information on the web worker.
<script type="text/javascript" src="klayjs-d3.min.js"></script>
<!-- or using a web worker:
<script type="text/javascript" src="klayjs-d3-ww.min.js"></script>
-->
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 format.
As soon as the layout process finished a callback function is invoked.
D3-Style
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
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
- Hierarchy
- Interactive
- Padding
- Node Label Placement
- Miserables (Data From D3 Force Example)
See the examples
folder.
You can easily run the examples locally using node's http-server.
bower install
npm install -g http-server
http-server .
[open browser localhost:8080]