D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mbostock
Full window
Github gist
stroke-dasharray
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>
https://d3js.org/d3.v3.min.js