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

Question

我真的很难理解d3 area和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

数据的维度不正确.每个区域路径都需要一个2D数组,如下所示:

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

结果是:

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

这意味着您需要将3D数组绑定到选择.然后,选择中的每个元素(即路径)将接收2D阵列.

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());