一、使用Delaunator生成點的Delaunay圖。
圖1. 偏移，坐标設定不正确
二、利用D3.js生成Voronoi圖與Delaunay三角網
D3.js v4生成的Voronoi圖
2.1 定義projection
使用d3.geoMercator()定義資料所對應的投影。
let projection = d3.geoMercator();
2.2 定義繪制path
利用d3.geoPath定義繪制地理資料所需的path。
let path = d3.geoPath().projection(projection)
2.3 GeoJSON點集資料
使用d3.json讀取點集資料，并根據資料的格式進行解析，取得GeoJSON中的features。并根據feature資料中的geometry，獲得其中的坐标資訊（coordinates)，得到生成voronoi圖所需的點集資料（points）。
圖2. 底圖，模拟的點集
2.4 生成voronoi圖
使用前面所獲得的坐标點集資訊，利用d3.voronoi生成voronoi圖的各多邊形（polygons）。
voronoi(points).polygons
圖3. 利用點集生成的Voronoi圖
2.5 生成Delaunay三角網
voronoi.links(points)
圖4. 點集對應的Delaunay三角網
2.6 Voronoi圖與Delaunay三角網的疊加
圖5. Voronoi圖和Delaunay三角網的疊加
圖6. 結合OpenLayers，內建Voronoi圖
圖7. 內建Voronoi和Delaunay圖，使用ImageCanvas繪制
三、裁剪，把限制範圍外的圖形裁剪掉
3.1 裁剪的方法
使用空間裁剪算法：Greiner-Hormann；Cohen-Sutherland；Martinez-Rueda；Weiler-Atherton；Vatti
使用繪制底層裁剪方法：Canvas clip；SVG clip
3.2 利用Canvas Clip進行裁剪的結果
1）讀取裁剪區域的Geometry多邊形；
2）循環讀取坐标對；
3）利用projection，把坐标對從地理空間（Earth）投影到像素空間（Screen）;
4) 利用轉換的坐标對建構Canvas clip對象；
圖8. 裁剪的結果
圖9. 裁剪的結果
3.3 使用Canvas clip進行裁剪中存在的問題
1）多個多邊形，如何裁剪？台灣及海南島的問題。
2）沒有考慮邊界的Voronoi效應；隻是單純的裁剪。
四、性能測試