5

私は新しい質問があります。D3 はこれを描画できますか: http://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html?_r=0 d3 内でボロノイ関数を使用しますか? 私が考えているのは、のように動作し、ここで見つかったボロノイhttp://bl.ocks.org/mbostock/4060366を円にバインドする svg です。NY Times は、フラッシュを使用して上記の視覚化を実現しました。何か案は？大きな円を作成して小さな円を埋め込んでみましたが、ボロノイが表示されず、点が外側の円に限定されません。生成されたコード:

        <svg class="PiYG" width="560" height="570">
    <circle cx="270" cy="300" r="260" style="stroke: rgb(0, 0, 0);">
    <g>

私のjsコードは次のようになります。

 var width = 560, height = 570;
var svg = d3.select("#VD1").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "PiYG");


var path = svg.append("circle")
        .attr("cx", 270)
        .attr("cy", 300)
        .attr("r", 260)
        .style("stroke", "#000")
        .append("g")
        .selectAll("path"); 

var vertices = d3.range(count).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});
var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

svg.selectAll("circle")
    .data(vertices.slice(2))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2);

本当にありがとう！

4

1 に答える 1

2

そうではありませんが、d3 の欠点によるものではなく、ボロノイ関数の機能ではないためです。ボロノイ関数は、グラフのどの領域が特定の点に最も近いかに基づいて線を作成します。これは、データに対応するサイズで、円をより小さなセグメントに比例して分割する方法ではありません。

そうは言っても、円形のボロノイ図を作成することは間違いなく可能です。そのためには、サンプルのボロノイ図のコードにいくつかの変更を加える必要があります。

まず、すべての点が円に収まるようにする必要があります。あなたの例では、ポイントの位置は で与えられdます。

.attr("transform", function(d) { return "translate(" + d + ")"; })

d（データセット）が円に収まる必要があるか、それを何らかの変換する必要があります。両方の次元で (-1,1) に正規化されたデータの場合、関数

.attr("transform", function(d) { return "translate([" +
    d[0]*Math.sqrt(1 - Math.pow(d[1],2)/2) 
    + "," +
    d[1]*Math.sqrt(1 - Math.pow(d[0],2)/2)
    + "])"; })

そうします。ここでは、元の配列から円で囲まれる新しい配列を作成しましたd。

次に、ボロノイ図が円の中に収まるようにクリップする必要があります。おもしろいのは、クリッピングする「円」の幾何学的オブジェクトが組み込まれていないことです。そのため、創造力を働かせる必要があります。これを行うための独自の方法を構築するか、ボロノイが円を超えて拡張し、SVG を構築してそれを覆い隠します。どちらでも動作するはずです。

于 2013-07-03T21:17:21.440 に答える