2d Polygon Boolean Operations With D3.js Svg

April 21, 2024 Post a Comment

I have 2 simple area graphs I've created using D3.js with the data & code below - Let's call them Graph A & Graph B. I would like to use them to create 3 new paths/polygons

Solution 1:

As a follow-up to my comment; I just tried out the GreinerHormann library I linked. It plays very nice with d3 (It takes input in the same manner, arrays of objects).

Here's a quick example of your A - B and B - A:

<!DOCTYPE html><html><head><scriptdata-require="d3@3.5.3"data-semver="3.5.3"src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script><scriptsrc="https://rawgit.com/w8r/GreinerHormann/master/dist/greiner-hormann.min.js"></script></head><body><script>// datavar 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 shapesvar 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'
      });
      
    varAminusB = greinerHormann.diff(dataA, dataB);
    varBminusA = greinerHormann.diff(dataB, dataA);
    
    // Graph shapesAminusB.forEach(function(d){
      svg.append("path")
      .datum(d)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'steelblue',
        opacity: 0.8
      });
    });
    
    // Graph shapesBminusA.forEach(function(d){
      svg.append("path")
      .datum(d)
      .attr("class", "area")
      .attr("d", area)
      .style({
        fill: 'orange',
        opacity: 0.8
      });
    });
      
  </script></body></html>

Solution 2:

jsclipper (sourceforge.net/projects/jsclipper) solution

// Accepts array or coordinate arrays [[{X:,Y:}]] - note X & Y must be upper case, d3.js requires lowercasefunctionboolean2D(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 outputvar 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
      });
    });

JavaScript Site

2d Polygon Boolean Operations With D3.js Svg

Solution 1:

Solution 2:

Post a Comment for "2d Polygon Boolean Operations With D3.js Svg"