SVG Diagonal Path by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
<script src="//d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>diagonal path</title>

<style>
  svg { background-color: beige; }
  path { fill: none; }
</style>
  
</head>

<body>

<script>
var w = 900;
var h = 400;
var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

svg.append("rect")
   .attr("width",w)
   .attr("height",h)
   .attr("fill", "none")
   .attr("stroke-width", 1)
   .attr("stroke", "black");

var d1 = d3.svg.diagonal()
           .source( {"x":w/2, "y":0} )
           .target( {"x":w/4, "y":h/4} );

svg.append("path")
    .attr("stroke", "blue")
    .attr("stroke-width", "10")
    .attr("d", d1);

svg.append("path")
	.attr("stroke", "red")
  .attr("stroke-width", "10")
	.attr("d", d3.svg.diagonal()
                     .source( {"x":w/2, "y":0} )
                     .target( {"x":3*w/4, "y":h/4} )
         );

svg.append("path")
	.attr("stroke", "blue")
  .attr("stroke-width", "6")
	.attr("d", d3.svg.diagonal()
                     .source( {"x":w/4, "y":h/4} )
                     .target( {"x":w/8, "y":2*h/4} ) 
         );

svg.append("path")
	.attr("stroke", "blue")
  .attr("stroke-width", "4")
	.attr("d", d3.svg.diagonal()
                     .source( {"x":w/4, "y":h/4} )
                     .target( {"x":3*w/8, "y":2*h/4} ) 
         );

// etc ...
</script>
  
</body>
</html>