用D3.js可以用平滑的线条绘制面积图？

debugcn 发表于 Dev

山下

我正在使用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");

提前致谢。

断层

您必须在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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。