svgpathD3data

svgpathD3data.html

    <script type="text/javascript">

       var divElem2 = d3.select("#svgpathD3data");

        svgcanvas2 = divElem2.append("svg:svg")
            .attr("width", 200)
            .attr("height", 200)
 
        // (2) Creating path using D3 path data generators

        // Specify the path points
        pathinfo = [{x:0, y:60},
                    {x:50, y:110},
                    {x:90, y:70},
                    {x:140, y:100}];

        // Specify the function for generating path data             
        var d3line2 = d3.svg.line()
                        .x(function(d){return d.x;})
                        .y(function(d){return d.y;})
                        .interpolate("linear"); 
                        // "linear" for piecewise linear segments

        // Creating path using data in pathinfo and path data generator
        // d3line.
        svgcanvas2.append("svg:path")
            .attr("d", d3line2(pathinfo))
            .style("stroke-width", 2)
            .style("stroke", "steelblue")
            .style("fill", "none");
        
    </script>