javascript - Area Chart with smooth lines possible with D3.js? -

javascript - Area Chart with smooth lines possible with D3.js? -

i creating area chart d3.js , create smooth line. possible?

in code create svg , set line , area on. utilize dummy data.

here code below： http://jsfiddle.net/sota0805/mv48h/

// info var linedata = [ { "x": 0, "y": 250}, { "x": 40, "y": 170}, { "x": 80, "y": 140}, { "x": 120, "y": 220}, { "x": 160, "y": 220}, { "x": 200, "y": 190}, { "x": 240, "y": 170}, { "x": 280, "y": 140}, { "x": 320, "y": 200}, { "x": 360, "y": 180}, { "x": 400, "y": 190}, { "x": 440, "y": 210}, { "x": 480, "y": 170}, { "x": 500, "y": 200}, ]; // drew svg var svg = d3.select("body").append("svg") .attr("width", 500) .attr("height", 230); var area = d3.svg.area() .x(function(d) { homecoming x(d.x); }) .y0(230) .y1(function(d) { homecoming y(d.y); }); // draw line var linefunction = d3.svg.line() .x(function(d) { homecoming d.x; }) .y(function(d) { homecoming d.y; }) .interpolate("basis"); var x = d3.scale.linear().range([0, 500]); var y = d3.scale.linear().range([0, 230]); x.domain(d3.extent(linedata, function(d) { homecoming d.x; })); y.domain([0, d3.max(linedata, function(d) { homecoming d.y; })]); svg.append("path") .attr("class", "area") .attr("d", area(linedata)); var linegraph = svg.append("path") .attr("d", linefunction(linedata)) .attr("stroke", "#549fc2") .attr("stroke-width", 0) .attr("fill", "none");

thanks in advance.

you have add together interpolate on d3.area function, so:

var area = d3.svg.area() .interpolate("monotone") //here .x(function(d) { homecoming x(d.x); }) .y0(230) .y1(function(d) { homecoming y(d.y); });

more options found here: https://www.dashingd3js.com/svg-paths-and-d3js near end of page

javascript d3.js charts stacked-area-chart