mgax/a-screenshot.png Secret

## a-screenshot.png

      
    Raw
  

              a-screenshot.png
            
          
## demo.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { width: 200px; height: 200px; }
rect { fill: none; stroke-width: 1px; stroke: steelblue; }
path { fill: none; stroke-width: 1px; stroke: black; }
</style>
<body>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/klayjs/klay.js"></script>
<script>

var graph = {
  width: 120,
  height: 190,
  children: [
    {id: "a", width: 80, height: 80, x: 10, y: 10, children: [
        {id: "b", width: 20, height: 20, x: 10, y: 10}
    ]},
    {id: "c", width: 80, height: 80, x: 10, y: 100}
  ]
};

render(graph);

$klay.layout({
  graph: graph,
  success: render,
  error: function (err) { console.error(err.text) }
})

function render(layout) {
  var svg = d3.select('body').append('svg');

  var offset = {}

  function traverse(node, x0, y0) {
    offset[node.id] = {x: x0, y: y0};
    var x = x0 + (node.x || 0);
    var y = y0 + (node.y || 0);

    svg.append('rect')
        .attr('x', x)
        .attr('y', y)
        .attr('width', node.width)
        .attr('height', node.height);

    svg.append('text')
        .attr('x', x)
        .attr('y', y + 16)
        .text(node.id || "root");

    (node.children || []).forEach(function(node) { traverse(node, x, y) });

    (node.edges || []).forEach(function(edge) {
      var source = offset[edge.source];
      function xy(p) { return [p.x + source.x, p.y + source.y] }
      svg.append('path')
          .attr('id', edge.id)
          .attr('d',
            "M" + xy(edge.sourcePoint) +
            edge.bendPoints.map(function(p) { return " L" + xy(p) }).join("") +
            " L" + xy(edge.targetPoint));

      svg.append('text')
        .append('textPath')
          .attr('xlink:href', '#' + edge.id)
          .attr('startOffset', "50%")
          .text(edge.id);
    });
  }
  traverse(layout, 5, 5);

}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg { width: 200px; height: 200px; }
	rect { fill: none; stroke-width: 1px; stroke: steelblue; }
	path { fill: none; stroke-width: 1px; stroke: black; }
	</style>
	<body>
	<script src="bower_components/d3/d3.min.js"></script>
	<script src="bower_components/klayjs/klay.js"></script>
	<script>

	var graph = {
	width: 120,
	height: 190,
	children: [
	{id: "a", width: 80, height: 80, x: 10, y: 10, children: [
	{id: "b", width: 20, height: 20, x: 10, y: 10}
	]},
	{id: "c", width: 80, height: 80, x: 10, y: 100}
	]
	};

	render(graph);

	$klay.layout({
	graph: graph,
	success: render,
	error: function (err) { console.error(err.text) }
	})

	function render(layout) {
	var svg = d3.select('body').append('svg');

	var offset = {}

	function traverse(node, x0, y0) {
	offset[node.id] = {x: x0, y: y0};
	var x = x0 + (node.x \|\| 0);
	var y = y0 + (node.y \|\| 0);

	svg.append('rect')
	.attr('x', x)
	.attr('y', y)
	.attr('width', node.width)
	.attr('height', node.height);

	svg.append('text')
	.attr('x', x)
	.attr('y', y + 16)
	.text(node.id \|\| "root");

	(node.children \|\| []).forEach(function(node) { traverse(node, x, y) });

	(node.edges \|\| []).forEach(function(edge) {
	var source = offset[edge.source];
	function xy(p) { return [p.x + source.x, p.y + source.y] }
	svg.append('path')
	.attr('id', edge.id)
	.attr('d',
	"M" + xy(edge.sourcePoint) +
	edge.bendPoints.map(function(p) { return " L" + xy(p) }).join("") +
	" L" + xy(edge.targetPoint));

	svg.append('text')
	.append('textPath')
	.attr('xlink:href', '#' + edge.id)
	.attr('startOffset', "50%")
	.text(edge.id);
	});
	}
	traverse(layout, 5, 5);

	}

	</script>