Skip to content

Instantly share code, notes, and snippets.

@aaizemberg

aaizemberg/index.html

Last active August 29, 2015 13:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aaizemberg/8693661 to your computer and use it in GitHub Desktop.
Save aaizemberg/8693661 to your computer and use it in GitHub Desktop.
Download ZIP
SVG Diagonal Path
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment