LATEST ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--

Agata's Blog

MATLABやPythonとともにD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< 【D3.js】 zoom メソッドの基本 | main | 【D3.js】SVGにドロップシャドウをかけて立体的にする >>
【D3.js】ボロノイ図の作成
0
    JUGEMテーマ:JavaScript

    ユークリッド平面上に複数の点が配置されているとき、どの点に最も近いかによってその平面を分割した図のことを「ボロノイ図 (Voronoi diagram)」と言います。 平面上に配置した点のことを「母点」と呼び、母点を 1 個含む分割された各領域のことを「ボロノイ領域」と呼びます。そして、隣接するボロノイ領域の境界のことを「ボロノイ境界」と言います。

    D3.jsには、ボロノイ図を作成するための d3.geom.voronoi() というメソッドが用意されています。今回は、このメソッドを使ったボロノイ図の作成方法を紹介します。
    var width = 960;
    var height = 540;
    var margin = 5;
    
    // D3.jsが用意する標準20色
    var color = d3.scale.category20c();
    
    // ボロノイ図の母点 100 個をランダムに生成
    var point = [];
    
    for(var k=0; k<100; k++){
      var x = margin+(width-2*margin)*Math.random();
      var y = margin+(height-2*margin)*Math.random();
      point.push([x,y]);
    }
    
    // ボロノイ図を作成
    draw_voronoi();
    
    // ボロノイ図を作成するための関数 draw_voronoi() を定義
    function draw_voronoi(){
      svg = d3.select("#MyGraph")
        .attr("width", width)
        .attr("height", height);
    
      var voronoiData = d3.geom.voronoi();
    
      // ボロノイ境界を計算しSVG要素として描画
      var voronoiPath = svg.selectAll("path")
        .data(voronoiData(point))
        .enter()
        .append("path")
        .attr("class", "voronoi")
        .attr("d", function(d,i){
          return "M" + d.join("L")+"Z";
        })
        .style("stroke", "white")
        .style("stroke-width", 2)
        .style("fill-opacity", 0.8)
        .style("fill", function(d,i){
            return color(i%20);
        });
      
      // 母点をSVG要素のcircleとして追加
      var pointElement = svg.selectAll("circle")
        .data(point)
        .enter()
        .append("circle")
        .attr("cx", function(d,i){
          return d[0];
        })
        .attr("cy", function(d,i){
          return d[1];
        })
        .attr("r", 2)
        .attr("fill", "black");
    };
    
    サンプルページ



     
    このエントリーをはてなブックマークに追加
    | D3.js | 21:48 | comments(0) | - | - |
    スポンサーリンク