Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 8, 2016
Embed
What would you like to do?
stroke-dasharray
license: gpl-3.0

A few dynamically generated stroke-dasharray styles.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
line {
stroke: #000;
stroke-width: 15px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectAll("line")
.data(d3.range(10))
.enter().append("line")
.attr("x1", "0%")
.attr("x2", "100%")
.attr("y1", function(d) { return height * (d + 0.5) / 10; })
.attr("y2", function(d) { return height * (d + 0.5) / 10; })
.attr("stroke-dasharray", function(d) { return (d + 1) + ",5"; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment