SVG Path

D3を用いたSVGのPathの描画

ソースは、こちら

Path.prototype = {
    constructor: Path,
    readNodesData: function()
    {
        this.lineNodes = [ 
                        {"x": 1, "y": 5}, {"x": 20, "y": 20},
                        {"x": 40, "y": 10}, {"x": 60, "y": 40},
                        {"x": 80, "y": 5}, {"x": 100, "y": 60}
                      ];
        return;
    }

};

function Path()
{
    this.lineNodes;

    this.svg =  d3.select("#drawArea").append("svg")
                 .attr("width", 100)
                 .attr("height", 100);

    this.lineFunction = d3.svg.line()
                              .x(function(d){return d.x;})
                              .y(function(d){return d.y;})
                              .interpolate("linear");
    this.readNodesData();

    this.line = this.svg.append("path")
                   .attr("d", this.lineFunction(this.lineNodes))
                   .attr("stroke", "blue")
                   .attr("stroke-width", 2)
                   .attr("fill", "none");
    return;
}