D3 Examples - Voronoi - voronoi.findAll()

xxxxxxxxxx
 
<html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="voronoi.js"></script>
<body>
<script>
var width = 960;
var height = 500;
​
var data = d3.range(200).map(function(d) {
  var y = d3.randomNormal(height / 2,80)();
  var  x = d3.randomNormal(width / 2, 150)();
  if(x > width)  x = width - 0.001; else if (x < 0) x = 0.001;
  if(y > height) y = height - 0.001; else if (y < 0) y = 0.001;
  return {x:x,y:y}
});
​
var svg = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);
​
var voronoi = d3.voronoi()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .size([width,height])(data);
  
  console.log(voronoi.cells);
  
var circles = svg.selectAll()
  .data(voronoi.cells.map(function(c) { return c.site; }), function(d) { return d.index; });
  
circles = circles.enter()
  .append("circle")
  .attr("cx",function(d) { return d[0]; })
  .attr("cy",function(d) { return d[1]; })
  .attr("r",3)
  .attr("fill","steelblue")
  .merge(circles);
  
var results = voronoi.findAll(width/2,height/2,25);
​
if(results) circles.data(results,function(d) { return d.index; }).attr("fill","orange");
  
var circle = svg.append("circle")
  .attr("cx",width/2)
  .attr("cy",height/2)
  .attr("r",25)
  .attr("fill","none")
  .attr("stroke","black")
  .attr("stroke-width",1);
  
circle.transition()
  .attrTween("r", function() {
    var node = this;
      return function(t) { 
        var r = d3.interpolate(25,200)(t);
        var results = voronoi.findAll(width/2,height/2,r);
        if(results) circles.data(results,function(d) { return d.index; }).attr("fill","orange");
        return r;
      }
    })
    .duration(2000)
    .delay(750);
​
</script>
    