D3.js voronoi.extent()函数

voronoi.extent()函数用于设置 Voronoi 生成器函数的范围。给定范围值用于在给定范围内设置 Voronoi 布局的剪辑范围。边界以二维数组的形式给出，类似于 [[x0, y0], [x1, y1]]。如果未指定范围，则返回默认值为空的当前剪辑范围。

句法：

d3.voronoi().extent([extent]);

参数：此函数采用上面给出的一个参数，如下所述。

• 范围：它告诉要裁剪的区域。它以二维数组的形式取值。

返回值：此函数不返回任何内容。

注意：请创建一个“data.csv”文件。该文件的数据在下面的代码中给出。

下面给出了几个Voronoi.extent()函数的例子。

示例 1：

HTML

 
 
  
 
     
     
  
     
    
    
    
 
  
 
    GeeksforGeeks
    voronoi.extent()
      
     
        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));
            var voronoi = d3.voronoi()
                        .x(function(d) { return x(d.x); });
                  voronoi.y(function(d) { return y(d.y); })
                // Setting the extent using voronoi.extent() 
                .extent([[50, 50], [300, 300]]);
                      
            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", "none")
                .attr("stroke", "black");
        });
  
        // Data for CSV file
        // x, y, group
        // 45, 4.4, H
        // 9.1, 4.4, H
        // 9.9, 9.9, H
        // 4.45, 9.6, H
        // 4, 7.6, H
        // 9, 45, H
        // 4, 9.7, H
        // 9.7, 4.7, H
        // 9.9, 4.5, H
        // 4, 4.5, H
        // 7.9, 9, H
        // 9.9, 45, H
        // 9, 4.4, H
     

输出：

示例 2：

HTML

 
 
  
 
     
     
  
     
    
    
    
 
  
 
    GeeksforGeeks
    voronoi.extent()
      
     
        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));
  
  
            var voronoi = d3.voronoi()
                            .x(function(d) { return x(d.x); });
                voronoi.y(function(d) { return y(d.y); })
                // Setting the extent using voronoi.extent() function 
                .extent([[0, 50], [250, 380]]);
                      
            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");
        });
  
        // Data for CSV file
        // x, y, group
        // 45, 4.4, H
        // 9.1, 4.4, H
        // 9.9, 9.9, H
        // 4.45, 9.6, H
        // 4, 7.6, H
        // 9, 45, H
        // 4, 9.7, H
        // 9.7, 4.7, H
        // 9.9, 4.5, H
        // 4, 4.5, H
        // 7.9, 9, H
        // 9.9, 45, H
        // 9, 4.4, H
     
 
 

输出：