bsr203/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
}

marker#licensing {
    fill: green;
}

path.link.licensing {
    stroke: green;
}

path.link.resolved {
    stroke-dasharray: 0,2 1;
}

circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var w = 800;
var h = 600;

var links = [
    {source:{name:"A", x:10, y:200}, target:{name:"B", x:50, y:200}},
    {source:{name:"B", x:50, y:200}, target:{name:"C", x:400, y:200}},
    {source:{name:"A", x:10, y:200}, target:{name:"D", x:990, y:200}},
    {source:{name:"C", x:400, y:200}, target:{name:"D", x:990, y:200}}
]


var nodes = {};

// Compute the distinct nodes from the links.
links.forEach(function (link) {
    link.source = nodes[link.source.name] || (nodes[link.source.name] = link.source);
    link.target = nodes[link.target.name] || (nodes[link.target.name] = link.target);
});

console.log(nodes);

var xScale = d3.scale.linear()
    .domain([0, 1000])
    .range([0 , w ]);

var yScale = d3.scale.linear()
    .domain([0, 1000])
    .range([h , 0]);


var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//nodes
var n = svg.selectAll("circle.node")
    .data(d3.values(nodes), function (d) {
        return d.name;
    });

n.enter()
    .append("circle")
    .attr("cx", function (d) {
        return xScale(d.x);
    })
    .attr("cy", function (d) {
        return yScale(d.y);
    })
    .attr("r", 5)
    .attr("class", "node");


var path = svg.append("g").selectAll("path")
    .data(links)
    .enter().append("path")
    .attr("class", "link ");

path.attr("d", function(d) {
    var xsource = xScale(d.source.x),
        ysource = yScale(d.source.y),
        xtarget = xScale(d.target.x),
        ytarget = yScale(d.target.y);

    var dx = xtarget - xsource,
        dy = ytarget - ysource,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + xsource + "," + ysource + "A" + dr + "," + dr + " 0 0,1 " + xtarget + "," + ytarget;
    //return "M" + xsource + "," + ysource + "A" + dr + "," + 50 + " 0 0,1 " + xtarget + "," + ytarget;
});

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	marker#licensing {
	fill: green;
	}

	path.link.licensing {
	stroke: green;
	}

	path.link.resolved {
	stroke-dasharray: 0,2 1;
	}

	circle {
	fill: #ccc;
	stroke: #333;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var w = 800;
	var h = 600;

	var links = [
	{source:{name:"A", x:10, y:200}, target:{name:"B", x:50, y:200}},
	{source:{name:"B", x:50, y:200}, target:{name:"C", x:400, y:200}},
	{source:{name:"A", x:10, y:200}, target:{name:"D", x:990, y:200}},
	{source:{name:"C", x:400, y:200}, target:{name:"D", x:990, y:200}}
	]


	var nodes = {};

	// Compute the distinct nodes from the links.
	links.forEach(function (link) {
	link.source = nodes[link.source.name] \|\| (nodes[link.source.name] = link.source);
	link.target = nodes[link.target.name] \|\| (nodes[link.target.name] = link.target);
	});

	console.log(nodes);

	var xScale = d3.scale.linear()
	.domain([0, 1000])
	.range([0 , w ]);

	var yScale = d3.scale.linear()
	.domain([0, 1000])
	.range([h , 0]);


	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//nodes
	var n = svg.selectAll("circle.node")
	.data(d3.values(nodes), function (d) {
	return d.name;
	});

	n.enter()
	.append("circle")
	.attr("cx", function (d) {
	return xScale(d.x);
	})
	.attr("cy", function (d) {
	return yScale(d.y);
	})
	.attr("r", 5)
	.attr("class", "node");


	var path = svg.append("g").selectAll("path")
	.data(links)
	.enter().append("path")
	.attr("class", "link ");

	path.attr("d", function(d) {
	var xsource = xScale(d.source.x),
	ysource = yScale(d.source.y),
	xtarget = xScale(d.target.x),
	ytarget = yScale(d.target.y);

	var dx = xtarget - xsource,
	dy = ytarget - ysource,
	dr = Math.sqrt(dx * dx + dy * dy);
	return "M" + xsource + "," + ysource + "A" + dr + "," + dr + " 0 0,1 " + xtarget + "," + ytarget;
	//return "M" + xsource + "," + ysource + "A" + dr + "," + 50 + " 0 0,1 " + xtarget + "," + ytarget;
	});

	</script>