Line

by Igor Cuckovic

HTML

<body>

</body>

JavaScript

// tutorial 11

var width = 501,
    height = 501;

var svg = d3.select("body").append("svg")
        .attr({
            "width": width,
            "height": height
        });

var data = [
    {x: 0, y:0},
    {x: 40, y:60},
    {x: 80, y:90}
];



// 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");


var group = svg.append("g")
    .attr("transform", "translate(100, 100)");

var line = d3.svg.line()
    .x(function(d) {return d.x; })
    .y(function(d) {return d.y; });

group.selectAll("path")
        .data([data])
        .enter()
        .append("path")
        .attr("d", line)
        .attr("fill", "none")
        .attr("stroke", "#000")
        .attr("stroke-width", 10);