D3.js voronoi()函数

D3.js中的d3.voronoi()函数用于创建具有默认x和y访问器以及空范围的新 Voronoi 图布局。 Voronoi 图是使用一组可以稍后指定的数据点绘制的。

句法：

d3.voronoi()

参数：此函数不接受任何参数。

下面的示例演示了d3.voronoi()函数：

例子：

HTML

  
  
  
  


  
    GeeksforGeeks
  
  
  
      
    // Import the CSV data for
    // specifying the Voronoi
    d3.csv("data.csv", 
           function (error, data) {
      var svg = d3.select("body")
        .append("svg")
        .attr("height", 400)
        .attr("width", 400)
        .append("g")
        .attr("transform",
              "translate(" + 20 +
              "," + -20 + ")");
  
      var y = d3.scaleLinear()
        .domain([2, 20])
        .range([400, 0]);
      var x = d3.scaleLinear()
        .domain([2, 15])
        .range([0, 400]);
      svg.append("g")
        .call(d3.axisLeft(y));
  
      svg.append("g")
        .attr("transform",
              "translate(0," + 400 + ")")
        .call(d3.axisBottom(x));
  
      // Using the d3.voronoi() function
      // to create a Voronoi diagram
      var voronoi = d3.voronoi()
        .x(function (d) { return x(d.x); })
        .y(function (d) { return y(d.y); })
        .extent([[0, 0], [400, 400]]);
  
      // Adding data to represent the Voronoi
      // and displaying it
      svg.append("g").selectAll("path")
        .data(voronoi(data).polygons())
        .enter()
        .append("path")
        .attr("d", (d) => 
              { return d ? 
                ("M" + d.join("L") +
                 "Z") : null; })
        .attr("fill", "green")
        .attr("stroke", "black");
    });
  

输出：