D3泰森多边形

古城微笑少年丶 2021-09-23 12:32 383阅读 0赞

### D3泰森多边形 ###

*  D3泰森多边形示例代码
 *  界面效果

# D3泰森多边形示例代码 #

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
    
    .triangles {
      fill: none;
    }
    
    .links {
      stroke: #000;
    }
    
    .sites {
      fill: #000;   //黑色
      stroke: #fff;  //白色
    }
    
    .triangles .primary {
      fill: #f00;
    }
    
    .links .primary {
      stroke: #fff;
    }
    
    .sites :first-child {
      fill: #fff;
    }
    
    </style>
    <svg width="960" height="500"></svg>
    
    
    <script src="./d3_5.14.2.min.js"></script>
    <script>
    
    var svg = d3.select("svg")
       width = +svg.attr("width"),
        height = +svg.attr("height");
    debugger
    
    //生成随机的坐标点
    var sites = d3.range(10)
        .map(function(d) { return [Math.random() * width, Math.random() * height]; });
    /**
    var sites =[
          [267.9209975005688, 379.3751254981226],
          [943.7398333408541, 418.65866999340903],
          [479.52144481621383, 380.00693430254785],
          [187.47809023912828, 38.27165834711255],
          [405.9934965423606, 26.394513050200462],
          [510.66798177187104, 98.63893482407582],
          [577.1853032467536, 126.1476827753022],
          [116.91624923957548, 456.1918205970447],
          [62.400157804006184, 258.10840657921386],
          [241.32040003222505, 447.48491825904756]
        ];
    **/
    
    var voronoi = d3.voronoi();
    
    //这里在这个示例里面没用可以删除
    var triangle = svg.append("g")
        .attr("class", "triangles")
        .selectAll("path")
        .data(voronoi.triangles(sites))
        .enter().append("path")
    
    	debugger
    
    	//画线
    var link = svg.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(voronoi.links(sites))
        .enter().append("line")
        .call(redrawLink);
    
    
        
       
    //.attr("r", 5.5)  设置顶点大小
    
    function redrawLink(link) {
      link
        //  .classed("primary", function(d) { return d.source === sites[0] || d.target === sites[0]; })
          .attr("x1", function(d) { return d.source[0]; })
          .attr("y1", function(d) { return d.source[1]; })
          .attr("x2", function(d) { return d.target[0]; })
          .attr("y2", function(d) { return d.target[1]; });
    }
    </script>

# 界面效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/ab18d0d79ce6481abdf583689a55d27c.png