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

【问题标题】：2D Polygon Boolean Operations with D3.js SVG使用 D3.js SVG 的 2D 多边形布尔运算
【发布时间】：2016-02-11 08:54:05
【问题描述】：

我使用 D3.js 创建了 2 个简单的区域图，数据和代码如下 - 我们称它们为 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)");

【问题讨论】：

从您的 wiki 文章中，有一些公认的算法：Vatti clipping 和 Greiner-Horrman。如果你搜索一下，就会有一个few implementations in javascript floating around。

标签： javascript d3.js svg graph

【解决方案1】：

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

这是您的A - B 和B - A 的一个简单示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" 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>

【讨论】：

嗯，看起来这个库并不适用于所有场景。如果我给它数据集 var dataA = [{ x: 0, y: 0, }, { x: 0, y: 100, }, { x: 100, y: 150, }, { x: 200, y: 350, }, { x: 300, y: 200, }, { x: 300, y: 0, }]; var dataB = [{ x: 0, y: 0, }, { x: 0, y: 200, }, { x: 100, y: 100, }, { x: 200, y: 250, }, { x: 300, y: 200, }, { x: 300, y: 0, }]; 它似乎失败了......
可能是d3中路径的绘制方式导致上述数据集失败？

【解决方案2】：

jsclipper (sourceforge.net/projects/jsclipper) 解决方案

// Accepts array or coordinate arrays [[{X:,Y:}]] - note X & Y must be upper case, d3.js requires lowercase
function boolean2D(subj_paths, clip_paths, clip_type) {

  var ct;

  switch (clip_type) {
    case "union":
      ct = ClipperLib.ClipType.ctUnion;
      break;
    case "difference":
      ct = ClipperLib.ClipType.ctDifference;
      break;
    case "intersection":
      ct = ClipperLib.ClipType.ctIntersection;
      break;
    case "exclusion":
      ct = ClipperLib.ClipType.ctXor;
      break;
  }

  var cpr = new ClipperLib.Clipper();

  cpr.AddPaths(subj_paths, ClipperLib.PolyType.ptSubject, true);  // true means closed path
  cpr.AddPaths(clip_paths, ClipperLib.PolyType.ptClip, true);

  var solution_paths = new ClipperLib.Paths();
  var succeeded = cpr.Execute(ct, solution_paths, ClipperLib.PolyFillType.pftNonZero, ClipperLib.PolyFillType.pftNonZero);

  return solution_paths //produces array of paths to plug into d3.js
}


aXY = boolean2D(x,y,"difference");


// convert XY to lowercase

axy = [];

aXY.forEach(function(d) {
    b = []
    d.forEach(function(c) {
      b.push({x:c.X, y:c.Y});
    });
    axy.push(b);
  });



//d3 output

var svg = d3.select('#chart').append('svg')
    .attr('width', 500)
    .attr('height', 500)
    .style('background', '#C9D7D6');

axy.forEach(function(d){
      svg.append("path")
      .attr("d", lineFunction(d))
      .style({
        fill: 'orange',
        opacity: 0.8
      });
    });

【讨论】：