SVG Diagonal Path

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

<body>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js