background lines

by Igor Cuckovic

HTML

<svg width="500" height="500"></svg>

JavaScript

var svg = d3.select("svg");

//vertical lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("x1", function (d) {
    return d * 20;
})
    .attr("x2", function (d) {
    return d * 20;
})
    .attr("y1", function (d) {
    return 0;
})
    .attr("y2", function (d) {
    return 500;
})
    .style("stroke", "#eee");
    


// horizontal lines
svg.selectAll(".vline").data(d3.range(26)).enter()
    .append("line")
    .attr("y1", function (d) {
    return d * 20;
})
    .attr("y2", function (d) {
    return d * 20;
})
    .attr("x1", function (d) {
    return 0;
})
    .attr("x2", function (d) {
    return 500;
})
    .style("stroke", "#eee");