d3.js - 什么是绝对最短的 d3 区域示例？

Question

我真的很难理解 d3area和stack布局的东西。我尝试制作我认为是最小的示例，但没有出现任何内容，实际上它在控制台中打印错误。我没有得到什么？这是代码。

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300)

var testData = [
  [ 0, 10],
  [10, 20],
  [20, 30],
  [30, 20],
];

svg.selectAll("path.area")
    .data(testData)
  .enter().append("path")
    .style("fill", "#ff0000")
    .attr("d", d3.svg.area());

Answer 1

数据的维度不正确。每个区域路径都需要一个二维数组，如下所示：

d3.svg.area()([[ 0, 10], [10, 20], [20, 30], [30, 20]])

结果是：

"M0,10L10,20L20,30L30,20L30,0L20,0L10,0L0,0Z"

这意味着您需要将 3D 数组绑定到选择。选择中的每个元素（即路径）然后将接收一个二维数组。

var svg = d3.select("body").append("svg")
    .attr("width", 400)
    .attr("height", 300)

var testData = [
  [ 0, 10],
  [10, 20],
  [20, 30],
  [30, 20],
];

svg.selectAll("path.area")
    .data([testData])      // dimension of data should be 3D
  .enter().append("path")
    .style("fill", "#ff0000")
    .attr("class", "area") // not the cause of your problem
    .attr("d", d3.svg.area());

有时，通过想象您想要创建多个区域来更容易描绘正在发生的事情。然后它看起来像：

var testData1 = [
  [ 0, 10],
  [10, 20],
  [20, 30],
  [30, 20],
];

var testData2 = [
  [100, 110],
  [110, 120],
  [120, 130],
  [130, 120],
];

svg.selectAll("path.area")
    .data([testData1, testData2])
  .enter().append("path")
    .style("fill", "#ff0000")
    .attr("class", "area")
    .attr("d", d3.svg.area());