3

多角形の描画に関する以下の回答は、単一の多角形に適しています。しかし、ポリゴンが複数ある場合はどうなるでしょうか。「すべて選択」を使用すると、問題なくさらにいくつかのポリゴンを追加しても問題ないことを示しているように見えますが、ポイントを含むポリゴンを追加するだけでは機能しないようです..

ポリゴンの配列があり、それぞれにポイントの配列である属性 Points があります。

ポリゴンを含む最初の配列は明らかにマップされ、各メンバーのポイント配列は説明どおりに処理されます。しかし、この 2 レベル構造を d3 で指定するにはどうすればよいでしょうか?

D3 でポリゴン データを描画するための適切な形式

4

1 に答える 1

1

答えは単純明快です。ポリゴンの配列をデータとして d3 選択に渡すだけです。あなたの場合、それぞれが「ポイント」と呼ばれるキーを持つ複合オブジェクトであるポリゴンの配列を使用しているようです。私はそれがこのように見えると仮定します-

var arrayOfPolygons =  [{
    "name": "polygon 1",
    "points":[
      {"x":0.0, "y":25.0},
      {"x":8.5,"y":23.4},
      {"x":13.0,"y":21.0},
      {"x":19.0,"y":15.5}
    ]
  },
  {
    "name": "polygon 2",
    "points":[
      {"x":0.0, "y":50.0},
      {"x":15.5,"y":23.4},
      {"x":18.0,"y":30.0},
      {"x":20.0,"y":16.5}
    ]
  },
  ... etc.
];

次のように記述できる同等のマップ関数を記述するときに、d.Points代わりに使用する必要があります-d

vis.selectAll("polygon")
  .data(arrayOfPolygons)
  .enter().append("polygon")
  .attr("points",function(d) { 
    return d.points.map(function(d) { 
      return [scaleX(d.x),scale(d.y)].join(",");
    }).join(" ");
  })
  .attr("stroke","black")
  .attr("stroke-width",2);

次の動作中のJSFiddleを確認して確認できます。

EDIT-完全なポリゴンをレンダリングするための凸包実装を使用した上記と同じ例。http://jsfiddle.net/arunkjn/EpBCH/1/ポリゴンの違いに注意#4

于 2013-02-26T23:10:45.820 に答える