9

私は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());
4

1 に答える 1

11

データの次元が正しくありません。各エリアパスには、次のような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());
于 2012-11-07T17:37:35.803 に答える