erizhang · August 1, 2014 03:02
diff --git a/diagonalSample.html b/diagonalSample.html
 <!DOCTYPE HTML>
 <html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <style>
            path {stroke: black; storke-width: 2; fill: none;}
            .plot {fill: none; stroke: #aec7e8; stroke-width: 2;}
            circle {fill: steelblue; stroke: white;}
        </style>
    </head>
    <body>
        <script>
            var width = 960;
            var height = 500;

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

            var diagonal = d3.svg.diagonal();
            var source = {x: 500, y: 50};
            var targets = [
                {x: 100, y: 150}, 
                {x: 300, y: 150}, 
                {x: 500, y: 150}, 
                {x: 700, y: 150}, 
                {x: 900, y: 150}, 
            ];
            // create the link pairs
            var links = targets.map(function(target) {
                return {source: source, target: target}; 
            });

            // use the diagnal generator to take our links and create the curved paths
            // to connect our nodes
            var link = svg.selectAll('path').data(links).enter().append('path')
                .attr('d', diagonal);

            // add all the nodes!
            var nodes = targets.concat(source);
            svg.selectAll('circle').data(nodes).enter().append('circle')
                .attr({
                    r: 20,
                    cx: function(d) {return d.x; }, 
                    cy: function(d) {return d.y; }
                });
        </script>
    </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	path {stroke: black; storke-width: 2; fill: none;}
	.plot {fill: none; stroke: #aec7e8; stroke-width: 2;}
	circle {fill: steelblue; stroke: white;}
	</style>
	</head>
	<body>
	<script>
	var width = 960;
	var height = 500;

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

	var diagonal = d3.svg.diagonal();
	var source = {x: 500, y: 50};
	var targets = [
	{x: 100, y: 150},
	{x: 300, y: 150},
	{x: 500, y: 150},
	{x: 700, y: 150},
	{x: 900, y: 150},
	];
	// create the link pairs
	var links = targets.map(function(target) {
	return {source: source, target: target};
	});

	// use the diagnal generator to take our links and create the curved paths
	// to connect our nodes
	var link = svg.selectAll('path').data(links).enter().append('path')
	.attr('d', diagonal);

	// add all the nodes!
	var nodes = targets.concat(source);
	svg.selectAll('circle').data(nodes).enter().append('circle')
	.attr({
	r: 20,
	cx: function(d) {return d.x; },
	cy: function(d) {return d.y; }
	});
	</script>
	</body>
	</html>