@ryan.murray
To create a dashed line legend with d3.js, you can follow these steps:
1
|
<svg id="legend" width="200" height="100"></svg> |
1 2 3 4 5 |
var legendData = [ { name: 'Line 1', color: 'blue' }, { name: 'Line 2', color: 'red' }, { name: 'Line 3', color: 'green' } ]; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var svg = d3.select('#legend'); var legend = svg.selectAll('.legend') .data(legendData) .enter() .append('g') .attr('class', 'legend') .attr('transform', function(d, i) { return 'translate(20,' + (i * 20 + 20) + ')'; }); legend.append('line') .attr('x1', 0) .attr('y1', 0) .attr('x2', 30) .attr('y2', 0) .style('stroke', function(d) { return d.color; }) .style('stroke-width', 3) .style('stroke-dasharray', '5,5'); legend.append('text') .attr('x', 40) .attr('y', 5) .text(function(d) { return d.name; }) .style('font-size', '12px'); |
By following these steps, you can create a dashed line legend with d3.js that displays the specified lines with their respective colors and labels.