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靠近页面末尾

D3.js可以使用流畅的线条区域图表？

1 个答案: