【D3.js學習總結】22、D3幾何-泰森多邊形

徐輝jser發表於2017-01-20
JS

d3.geom.voronoi()

在日常生活中有這樣的場景，在一個城市中有很多的便利店，當你走在城市的任意地方，怎麼才能找到離你了近的便利店呢？這種場景就適合用泰森多邊形來解決。

通過一個示例來展示。

1、資料

var dataset = [[18,162], [114,403], [261,98] ]; //假設這是三家便利店

2、資料轉換

  var width = 500;
  var height = 500;

  var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);//從畫面左上角到右下角為顯示區間

  var data = voronoi(dataset);

轉換後的資料如圖所示。

通過轉換，將資料變成折線圖的每個頂點座標，這樣我們就可以通過將頂點連線起來組成一個個不規則區域；

3、繪製圖形

生成SVG容器

    var svg = d3.select(`body`).append(`svg`)
      .attr(`width`,width)
      .attr(`height`,height)

顏色比例尺

var color = d3.scale.category10();

生成折線路徑

  svg.append("g").selectAll("path")
    .data(data)
    .enter()
    .append("path")
    .attr(`fill`,function(d,i){
      return color(i);
    })
    .attr("d", function(d,i){
      // 通過d.join("L")方法將每個頂點連線起來
      return "M" + d.join("L") + "Z";
    });

生成便利店位置

  svg.append(`g`).selectAll(`circle`)
    .data(dataset)
    .enter()
    .append(`circle`)
    .attr(`cx`, function(d,i){
      return d[0];
    })
    .attr(`cy`, function(d,i){
      return d[1];
    })
    .attr(`r`, 5)
    .attr(`fill`,`#fff`)

注意在生成便利店位置時，我們用的資料是原始的資料；

檢視線上演示


相關文章