使用D3.js SVG的2D多边形布尔运算

Ryan King 发表于 Dev

瑞安·金（Ryan King）

我有两个使用D3.js使用下面的数据和代码创建的简单区域图-称它们为Graph A＆Graph B。我想使用它们根据它们的相交方式创建3个新路径/多边形。

Path 1= Graph A-Graph B
Path 2= Graph B-Graph A
Path 3= Graph B-Path 2或Graph A和Graph B交集

大多数可视化编辑器都允许您执行这些布尔操作，请参见：https : //en.wikipedia.org/wiki/Boolean_operations_on_polygons

是否可以在D3.js中执行此操作？

jsfiddle：https ://jsfiddle.net/jvf1utmx/

图形定义：

// data
var dataA = [
    { x: 0, y: 100, },
    { x: 100, y: 150, },
    { x: 200, y: 350, },
    { x: 300, y: 200, },
];

var dataB = [
    { x: 0, y: 200, },
    { x: 100, y: 100, },
    { x: 200, y: 250, },
    { x: 300, y: 150, },
];

// Graph shapes
    var graphA = svg.append("path")
    .datum(dataA)
    .attr("class", "area")
    .attr("d", area)
    .style({fill: '#bbbb00', opacity: 0.8});

    var graphB = svg.append("path")
    .datum(dataB)
    .attr("class", "area")
    .attr("d", area)
    .style({fill: '#666666', opacity: 0.8});

我对剪切路径的尝试：

// Clipping attempts
    var graphBClip = svg.append("clipPath")
        .attr('id','graphBClip')

    graphBClip.append(graphB);

    graphA.attr("clip-path","url(#graphBClip)");

标记

作为我的评论的后续行动；我刚刚尝试了链接的GreinerHormann库。它的作用非常好d3（它以相同的方式接受输入，对象数组）。

这是您A - B和的快速示例B - A：

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="https://rawgit.com/w8r/GreinerHormann/master/dist/greiner-hormann.min.js"></script>
</head>

<body>
  <script>
    // data
    var dataA = [{
      x: 0,
      y: 100,
    }, {
      x: 100,
      y: 150,
    }, {
      x: 200,
      y: 350,
    }, {
      x: 300,
      y: 200,
    }, ];

    var dataB = [{
      x: 0,
      y: 200,
    }, {
      x: 100,
      y: 100,
    }, {
      x: 200,
      y: 250,
    }];
    
    var area = d3.svg.line()
      .x(function(d){
        return d.x;
      })
      .y(function(d){
        return d.y;
      });
      
    var svg = d3.select('body')
      .append('svg')
      .attr('width', 500)
      .attr('height', 500);

    // Graph shapes
    var graphA = svg.append("path")
      .datum(dataA)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'none'
      });

    var graphB = svg.append("path")
      .datum(dataB)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'none'
      });
      
    var AminusB = greinerHormann.diff(dataA, dataB);
    var BminusA = greinerHormann.diff(dataB, dataA);
    
    // Graph shapes
    AminusB.forEach(function(d){
      svg.append("path")
      .datum(d)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'steelblue',
        opacity: 0.8
      });
    });
    
    // Graph shapes
    BminusA.forEach(function(d){
      svg.append("path")
      .datum(d)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'orange',
        opacity: 0.8
      });
    });
      
  </script>

</body>

</html>