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).

Either download the library from the dist folder or install using npm or bower.

bower install klayjs-d3

npm install klayjs-d3

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.

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]
});

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]
});

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]