javascript - 使用 D3.js 可以绘制线条流畅的面积图吗？

Question

我正在使用 D3.js 创建面积图，并使用平滑线制作它。 是否可以？

在我的代码中，我只是创建了 svg 并放置了线条和区域。我使用虚拟数据。

下面是我的代码: http://jsfiddle.net/sota0805/mv48H/

// Data
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)  {  return x(d.x); })
             .y0(230)
             .y1(function(d) {  return y(d.y); });

// Draw line
var lineFunction = d3.svg.line()
           .x(function(d) { return d.x; })
           .y(function(d) { return 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) { return d.x; }));
y.domain([0, d3.max(lineData, function(d) { return 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");

提前致谢。

Answer 1

您必须在 d3.area 函数上添加插值，如下所示:

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

更多选项可以在这里找到: https://www.dashingd3js.com/svg-paths-and-d3js接近页面末尾