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

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

1 个答案: