D3 Examples - Voronoi Tessellation

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.links {
  stroke: #000;
  stroke-opacity: 0.2;
}
​
.polygons {
  fill: none;
  stroke: #000;
}
​
.polygons :first-child {
  fill: #f00;
}
​
.sites {
  fill: #000;
  stroke: #fff;
}
​
.sites :first-child {
  fill: #fff;
}
​
</style>
<svg width="400" height="200"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/buckets/1.90.0/buckets.js"></script>
<script>
  
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
svg.append("g")
    .attr("class", "sitesL");
  
svg.append("g")
    .attr("class", "sitesR");
​
var sites = d3.range(6)
    .map(function(d) { return [Math.random() * width, Math.random() * height]; });
​
// var polygon = svg.append("g")
//     .attr("class", "polygons")
//   .selectAll("path")
//   .data(voronoi.polygons(sites))
//   .enter().append("path")
//     .call(redrawPolygon);
​
// var link = svg.append("g")
//     .attr("class", "links")
//   .selectAll("line")
//   .data(voronoi.links(sites))
//   .enter().append("line")
//     .call(redrawLink);
​
   
​
var sites = sites.sort((a,b) => a[0] - b[0])
var siteL = sites.splice(0, sites.length/2).reverse();
var siteR = sites.splice(sites.length/2 - 1);
​
  
var site = d3.select(".sitesL").selectAll("circle")
  .data(siteL).enter().append("circle")
    .attr("r", 2.5)
        .attr("cx", (d) => {
      return d[0]})
        .attr("cy", (d) => d[1])
​
var site = d3.select(".sitesR")
.selectAll("circle")
  .data(siteR).enter().append("circle")
    .attr("r", 2.5)
        .attr("cx", (d) => d[0])
        .attr("cy", (d) => d[1])
        .attr("fill", "red")
​
var lastL = siteL[0]
var firstR = siteR[0]
​
svg.append("line")          // attach a line
        .attr("id", "line")
    .style("stroke", "black")  // colour the line
    .attr("x1", lastL[0])     // x position of the first end of the line
    .attr("y1", lastL[1])      // y position of the first end of the line
    .attr("x2", firstR[0])     // x position of the second end of the line
    .attr("y2", firstR[1]);    // y position of the second end of the line
  
var getSlope = function(p2,p1){
    return (200-p2[1] - (200 - p1[1])) / (p2[0] - p1[0]) 
}
​
var i = 0;
var j = 0;
var slope = getSlope(siteR[0], siteL[0])
var n = true
while (n) {
  n = false
  while (siteL[i + 1] && getSlope(siteR[j], siteL[i+1]) > slope) {
     n = true
      console.log('i',slope, i , siteL[i][0],  siteR[j][0])
​
      slope = getSlope(siteR[j], siteL[i + 1])
​
      d3.select("svg").append('line')
        .attr("x1", siteL[i+1][0])
        .attr("y1", siteL[i+1][1])
            .attr("x2", siteR[j][0])
            .attr("y2", siteR[j][1]) 
        .attr("stroke", "red")
​
      i++;
        
    } 
​
​
    while (siteR[j + 1] && getSlope(siteR[j + 1], siteL[i]) < slope) {
            n = true
​
        console.log('j',slope, j , siteL[i][0],  siteR[j][0])
​
      slope = getSlope(siteR[j + 1], siteL[i])
      d3.select("svg").append('line')
    .attr("x1", siteL[i][0])     // x position of the first end of the line
    .attr("y1", siteL[i][1])
        .attr("x2", siteR[j+1][0])
        .attr("y2", siteR[j+1][1]).
        attr("stroke", "blue")
      j++;
    } 
} 
  console.log("break")
</script>
​
    