semerj/hierarchy.json

## hierarchy.json
{
    "id": "root",
    "children": [{
        "id": "n1",
        "labels": [ { "text": "n1" } ],
        "width": 10,
        "height": 10
    },{
        "id": "n5",
        "labels": [ { "text": "n5" } ],
        "width": 10,
        "height": 10
    },{
        "id": "n6",
        "labels": [ { "text": "n6" } ],
        "width": 10,
        "height": 10
    },{
        "id": "n7",
        "labels": [ { "text": "n7" } ],
        "width": 10,
        "height": 10
    },{
        "id": "n10",
        "labels": [ { "text": "n10" } ],
        "width": 10,
        "height": 10
    },{
        "id": "g0",
        "labels": [ { "text": "g0" } ],
        "width": 10,
        "height": 10,
        "children": [{
            "id": "n3",
            "labels": [ { "text": "n3" } ],
            "width": 10,
            "height": 10
        },{
            "id": "n4",
            "labels": [ { "text": "n4" } ],
            "width": 10,
            "height": 10
        },{
            "id": "n8",
            "labels": [ { "text": "n8" } ],
            "width": 10,
            "height": 10
        },{
            "id": "n9",
            "labels": [ { "text": "n9" } ],
            "width": 10,
            "height": 10
        }]
    }],
    "edges": [{
        "id": "e0",
        "source": "n1",
        "target": "n3"
    },{
        "id": "e1",
        "source": "n1",
        "target": "n8"
    },{
        "id": "e2",
        "source": "n1",
        "target": "n5"
    },{
        "id": "e3",
        "source": "n3",
        "target": "n4"
    },{
        "id": "e4",
        "source": "n8",
        "target": "n9"
    },{
        "id": "e5",
        "source": "n5",
        "target": "n6"
    },{
        "id": "e6",
        "source": "n4",
        "target": "n10"
    },{
        "id": "e7",
        "source": "n9",
        "target": "n7"
    },{
        "id": "e8",
        "source": "n4",
        "target": "n6"
    }]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <script type="text/javascript" src="../bower_components/klayjs-d3/dist/klayjs-d3.js"></script>
  <script type="text/javascript" src="../bower_components/d3/d3.js"></script>
  <link rel="stylesheet" href="hierarchy.css">
</head>
<body>
  <h1>KlayJS example</h1>
  <script type="text/javascript" src="hierarchy.js"></script>
</body>

## index.js
function viewport() {
  var e = window,
      a = 'inner';
  if (!('innerWidth' in window)) {
    a = 'client';
    e = document.documentElement || document.body;
  }
  return {
    width: e[a + 'Width'],
    height: e[a + 'Height']
  }
}

var width = viewport().width,
    height = viewport().height;

var zoom = d3.behavior.zoom()
    .on("zoom", redraw);
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoom)
    .append("g");

// group
var root = svg.append("g");
var layouter = klay.d3kgraph()
      .size([width, height])
      .transformGroup(root)
      .options({
        layoutHierarchy: true,
        intCoordinates: true,
        direction: "DOWN",
        edgeRouting: "ORTHOGONAL",
        nodeLayering: "NETWORK_SIMPLEX",
        nodePlace: "BRANDES_KOEPF",
        fixedAlignment: "NONE",
        crossMin: "LAYER_SWEEP",
        algorithm: "de.cau.cs.kieler.klay.layered"
      });

// load data and render elements
d3.json("./data/hierarchy.json", function(error, graph) {

  layouter.on("finish", function(d) {

    var nodes = layouter.nodes();
    var links = layouter.links(nodes);

    var linkData = root.selectAll(".link")
        .data(links, function(d) { return d.id; });

    // build the arrow.
    svg.append("svg:defs").selectAll("marker")
        .data(["end"])                 // define link/path types
      .enter().append("svg:marker")    // add arrows
        .attr("id", String)
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 10)
        .attr("refY", 0)
        .attr("markerWidth", 3)        // marker settings
        .attr("markerHeight", 5)
        .attr("orient", "auto")
        .style("fill", "#999")
        .style("stroke-opacity", 0.6)  // arrowhead color
      .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5");

    // add arrows
    var link = linkData.enter()
        .append("path")
        .attr("class", "link")
        .attr("d", "M0 0")
        .attr("marker-end", "url(#end)");

    // add edge labels
    linkData.enter()
        .append("text")
        .attr("x", function(d) { return d.targetPoint.x; })  // position edge labels
        .attr("y", function(d) { return d.targetPoint.y - 10; })
        .attr("text-anchor", "middle")
        .attr("font-size", "4px")
        .text(function(d) { return d.id; });

    var nodeData = root.selectAll(".node")
        .data(nodes,  function(d) { return d.id; });
    var node = nodeData.enter()
        .append("g")
        .attr("class", function(d) {
          if (d.children)
            return "node compound";
          else
            return "node leaf";
        });

    var atoms = node.append("rect")
        .attr("width", 10)
        .attr("height", 10);

    // add node labels
    node.append("text")
        .attr("x", 2.5)
        .attr("y", 6.5)
        .text(function(d) { return d.id; })
        .attr("font-size", "4px");

    // apply edge routes
    link.transition().attr("d", function(d) {
      var path = "";
      path += "M" + d.sourcePoint.x + " " + d.sourcePoint.y + " ";
        (d.bendPoints || []).forEach(function(bp, i) {
          path += "L" + bp.x + " " + bp.y + " ";
        });
      path += "L" + d.targetPoint.x + " " + d.targetPoint.y + " ";
      return path;
    });

    // apply node positions
    node.transition()
      .attr("transform", function(d) {
        return "translate(" + (d.x || 0) + " " + (d.y || 0) + ")"
    });

    atoms.transition()
      .attr("width", function(d) { return d.width; })
      .attr("height", function(d) { return d.height; });
  });

  layouter.kgraph(graph);
});

function redraw() {
  svg.attr("transform", "translate(" + d3.event.translate + ")"
                          + " scale(" + d3.event.scale + ")");
}
	{
	"id": "root",
	"children": [{
	"id": "n1",
	"labels": [ { "text": "n1" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n5",
	"labels": [ { "text": "n5" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n6",
	"labels": [ { "text": "n6" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n7",
	"labels": [ { "text": "n7" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n10",
	"labels": [ { "text": "n10" } ],
	"width": 10,
	"height": 10
	},{
	"id": "g0",
	"labels": [ { "text": "g0" } ],
	"width": 10,
	"height": 10,
	"children": [{
	"id": "n3",
	"labels": [ { "text": "n3" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n4",
	"labels": [ { "text": "n4" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n8",
	"labels": [ { "text": "n8" } ],
	"width": 10,
	"height": 10
	},{
	"id": "n9",
	"labels": [ { "text": "n9" } ],
	"width": 10,
	"height": 10
	}]
	}],
	"edges": [{
	"id": "e0",
	"source": "n1",
	"target": "n3"
	},{
	"id": "e1",
	"source": "n1",
	"target": "n8"
	},{
	"id": "e2",
	"source": "n1",
	"target": "n5"
	},{
	"id": "e3",
	"source": "n3",
	"target": "n4"
	},{
	"id": "e4",
	"source": "n8",
	"target": "n9"
	},{
	"id": "e5",
	"source": "n5",
	"target": "n6"
	},{
	"id": "e6",
	"source": "n4",
	"target": "n10"
	},{
	"id": "e7",
	"source": "n9",
	"target": "n7"
	},{
	"id": "e8",
	"source": "n4",
	"target": "n6"
	}]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<script type="text/javascript" src="../bower_components/klayjs-d3/dist/klayjs-d3.js"></script>
	<script type="text/javascript" src="../bower_components/d3/d3.js"></script>
	<link rel="stylesheet" href="hierarchy.css">
	</head>
	<body>
	<h1>KlayJS example</h1>
	<script type="text/javascript" src="hierarchy.js"></script>
	</body>
	function viewport() {
	var e = window,
	a = 'inner';
	if (!('innerWidth' in window)) {
	a = 'client';
	e = document.documentElement \|\| document.body;
	}
	return {
	width: e[a + 'Width'],
	height: e[a + 'Height']
	}
	}

	var width = viewport().width,
	height = viewport().height;

	var zoom = d3.behavior.zoom()
	.on("zoom", redraw);
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.call(zoom)
	.append("g");

	// group
	var root = svg.append("g");
	var layouter = klay.d3kgraph()
	.size([width, height])
	.transformGroup(root)
	.options({
	layoutHierarchy: true,
	intCoordinates: true,
	direction: "DOWN",
	edgeRouting: "ORTHOGONAL",
	nodeLayering: "NETWORK_SIMPLEX",
	nodePlace: "BRANDES_KOEPF",
	fixedAlignment: "NONE",
	crossMin: "LAYER_SWEEP",
	algorithm: "de.cau.cs.kieler.klay.layered"
	});

	// load data and render elements
	d3.json("./data/hierarchy.json", function(error, graph) {

	layouter.on("finish", function(d) {

	var nodes = layouter.nodes();
	var links = layouter.links(nodes);

	var linkData = root.selectAll(".link")
	.data(links, function(d) { return d.id; });

	// build the arrow.
	svg.append("svg:defs").selectAll("marker")
	.data(["end"]) // define link/path types
	.enter().append("svg:marker") // add arrows
	.attr("id", String)
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", 10)
	.attr("refY", 0)
	.attr("markerWidth", 3) // marker settings
	.attr("markerHeight", 5)
	.attr("orient", "auto")
	.style("fill", "#999")
	.style("stroke-opacity", 0.6) // arrowhead color
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	// add arrows
	var link = linkData.enter()
	.append("path")
	.attr("class", "link")
	.attr("d", "M0 0")
	.attr("marker-end", "url(#end)");

	// add edge labels
	linkData.enter()
	.append("text")
	.attr("x", function(d) { return d.targetPoint.x; }) // position edge labels
	.attr("y", function(d) { return d.targetPoint.y - 10; })
	.attr("text-anchor", "middle")
	.attr("font-size", "4px")
	.text(function(d) { return d.id; });

	var nodeData = root.selectAll(".node")
	.data(nodes, function(d) { return d.id; });
	var node = nodeData.enter()
	.append("g")
	.attr("class", function(d) {
	if (d.children)
	return "node compound";
	else
	return "node leaf";
	});

	var atoms = node.append("rect")
	.attr("width", 10)
	.attr("height", 10);

	// add node labels
	node.append("text")
	.attr("x", 2.5)
	.attr("y", 6.5)
	.text(function(d) { return d.id; })
	.attr("font-size", "4px");

	// apply edge routes
	link.transition().attr("d", function(d) {
	var path = "";
	path += "M" + d.sourcePoint.x + " " + d.sourcePoint.y + " ";
	(d.bendPoints \|\| []).forEach(function(bp, i) {
	path += "L" + bp.x + " " + bp.y + " ";
	});
	path += "L" + d.targetPoint.x + " " + d.targetPoint.y + " ";
	return path;
	});

	// apply node positions
	node.transition()
	.attr("transform", function(d) {
	return "translate(" + (d.x \|\| 0) + " " + (d.y \|\| 0) + ")"
	});

	atoms.transition()
	.attr("width", function(d) { return d.width; })
	.attr("height", function(d) { return d.height; });
	});

	layouter.kgraph(graph);
	});

	function redraw() {
	svg.attr("transform", "translate(" + d3.event.translate + ")"
	+ " scale(" + d3.event.scale + ")");
	}