D3.js - detect intersection area

2020-08-15 10:50发布

站内问答 / JavaScript
772 1 6

NB

This question is not a duplicate.. Other posts are looking for the intersection points and not intersection area

I am trying to detect the intersection area of 3 circles in order to process it differently than the non-intersection zone.

My circles look like: enter image description here

The intersection area here is not visible. What I could do so far is to show it by decreasing the opacity to get something like this:

enter image description here

I am looking for a smart way to detect the intersection zone of this three circles.

EDIT

In case that can help, here is my d3.js code:

// Code circle 
    svg.append("circle")
    .attr("class","services_nodes")
    .attr("cx",7*width/16)
    .attr("cy",height/2)
    .attr("r",height/4)
    .attr('fill', "blue")

    // Label code
    svg.append("text")
    .attr("class","label_services")
    .attr("x", 7*width/16 - 21*width/265)
    .attr("y",35*height/64)
    .text("Code");

    // Consulting
    svg.append("circle")
    .attr("class","services_nodes")
    .attr("cx",9*width/16)
    .attr("cy",height/2)
    .attr('fill', "red")
    .attr('r', height/4)

    // Label Consulting
    svg.append("text")
    .attr("class","label_services")
    .attr("x", 9*width/16)
    .attr("y",35*height/64)
    .text("Consulting");

    // Support 
    svg.append("circle")
    .attr("class","services_nodes")
    .attr("cx",7*width/16 + height/8)
    .attr("cy",height/2 - Math.sqrt(3)*height/8) // y +/- Math.sqrt(3)*r/2
    .attr('fill', "green")
    .attr('r',height/4)

    // Label Support
    svg.append("text")
    .attr("class","label_services")
    .attr("x", 7*width/16 + 3*height/64)
    .attr("y",height/2 - Math.sqrt(3)*height/8 - 3*height/32)
    .text("Support");

Thanks in advance!

1条回答
啃猪蹄的小仙女
2楼-- · 2020-08-15 10:59

As I stated in my comments, the area of intersection is simply the two arcs drawn from the intersection points on each circle. Borrowing the intersection code from here.

var interPoints = intersection(x1, y1, r, x2, y2, r);

svg.append("g")
  .append("path")
  .attr("d", function() {
    return "M" + interPoints[0] + "," + interPoints[2] + "A" + r + "," + r +
      " 0 0,1 " + interPoints[1] + "," + interPoints[3]+ "A" + r + "," + r +
      " 0 0,1 " + interPoints[0] + "," + interPoints[2];
  })
  .style('fill', 'red');

Full working code for 2 circles is:

<!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>
</head>

<body>
  <script>
    var x1 = 100,
      y1 = 100,
      x2 = 150,
      y2 = 150,
      r = 70;

    var svg = d3.select('body')
      .append('svg')
      .attr('width', 600)
      .attr('height', 600);

    svg.append('circle')
      .attr('cx', x1)
      .attr('cy', y1)
      .attr('r', r)
      .style('fill', 'steelblue');

    svg.append('circle')
      .attr('cx', x2)
      .attr('cy', y2)
      .attr('r', r)
      .style('fill', 'orange');

    var interPoints = intersection(x1, y1, r, x2, y2, r);

    svg.append("g")
      .append("path")
      .attr("d", function() {
        return "M" + interPoints[0] + "," + interPoints[2] + "A" + r + "," + r +
          " 0 0,1 " + interPoints[1] + "," + interPoints[3]+ "A" + r + "," + r +
          " 0 0,1 " + interPoints[0] + "," + interPoints[2];
      })
      .style('fill', 'red');


    function intersection(x0, y0, r0, x1, y1, r1) {
      var a, dx, dy, d, h, rx, ry;
      var x2, y2;

      /* dx and dy are the vertical and horizontal distances between
       * the circle centers.
       */
      dx = x1 - x0;
      dy = y1 - y0;

      /* Determine the straight-line distance between the centers. */
      d = Math.sqrt((dy * dy) + (dx * dx));

      /* Check for solvability. */
      if (d > (r0 + r1)) {
        /* no solution. circles do not intersect. */
        return false;
      }
      if (d < Math.abs(r0 - r1)) {
        /* no solution. one circle is contained in the other */
        return false;
      }

      /* 'point 2' is the point where the line through the circle
       * intersection points crosses the line between the circle
       * centers.  
       */

      /* Determine the distance from point 0 to point 2. */
      a = ((r0 * r0) - (r1 * r1) + (d * d)) / (2.0 * d);

      /* Determine the coordinates of point 2. */
      x2 = x0 + (dx * a / d);
      y2 = y0 + (dy * a / d);

      /* Determine the distance from point 2 to either of the
       * intersection points.
       */
      h = Math.sqrt((r0 * r0) - (a * a));

      /* Now determine the offsets of the intersection points from
       * point 2.
       */
      rx = -dy * (h / d);
      ry = dx * (h / d);

      /* Determine the absolute intersection points. */
      var xi = x2 + rx;
      var xi_prime = x2 - rx;
      var yi = y2 + ry;
      var yi_prime = y2 - ry;

      return [xi, xi_prime, yi, yi_prime];
    }
  </script>
</body>

</html>

Following this, the intersection of 3 circles becomes:

<!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>
</head>

<body>
  <script>
    var x1 = 150,
      y1 = 100,
      x2 = 200,
      y2 = 150,
      x3 = 100,
      y3 = 150,
      r = 70;

    var svg = d3.select('body')
      .append('svg')
      .attr('width', 600)
      .attr('height', 600);

    svg.append('circle')
      .attr('cx', x1)
      .attr('cy', y1)
      .attr('r', r)
      .style('fill', 'steelblue');

    svg.append('circle')
      .attr('cx', x2)
      .attr('cy', y2)
      .attr('r', r)
      .style('fill', 'orange');
      
    svg.append('circle')
      .attr('cx', x3)
      .attr('cy', y3)
      .attr('r', r)
      .style('fill', 'green');

    var interPoints1 = intersection(x1, y1, r, x2, y2, r);
    var interPoints2 = intersection(x2, y2, r, x3, y3, r);
    var interPoints3 = intersection(x1, y1, r, x3, y3, r);
    
    svg.append("g")
      .append("path")
      .attr("d", function() {
        return "M" + interPoints3[1] + "," + interPoints3[3] + "A" + r + "," + r +
          " 0 0,1 " + interPoints1[0] + "," + interPoints1[2] + "A" + r + "," + r +
          " 0 0,1 " + interPoints2[0] + "," + interPoints2[2] + "A" + r + "," + r +
          " 0 0,1 " + interPoints3[1] + "," + interPoints3[3];
      })
      .style('fill', 'red');

    function intersection(x0, y0, r0, x1, y1, r1) {
      var a, dx, dy, d, h, rx, ry;
      var x2, y2;

      /* dx and dy are the vertical and horizontal distances between
       * the circle centers.
       */
      dx = x1 - x0;
      dy = y1 - y0;

      /* Determine the straight-line distance between the centers. */
      d = Math.sqrt((dy * dy) + (dx * dx));

      /* Check for solvability. */
      if (d > (r0 + r1)) {
        /* no solution. circles do not intersect. */
        return false;
      }
      if (d < Math.abs(r0 - r1)) {
        /* no solution. one circle is contained in the other */
        return false;
      }

      /* 'point 2' is the point where the line through the circle
       * intersection points crosses the line between the circle
       * centers.  
       */

      /* Determine the distance from point 0 to point 2. */
      a = ((r0 * r0) - (r1 * r1) + (d * d)) / (2.0 * d);

      /* Determine the coordinates of point 2. */
      x2 = x0 + (dx * a / d);
      y2 = y0 + (dy * a / d);

      /* Determine the distance from point 2 to either of the
       * intersection points.
       */
      h = Math.sqrt((r0 * r0) - (a * a));

      /* Now determine the offsets of the intersection points from
       * point 2.
       */
      rx = -dy * (h / d);
      ry = dx * (h / d);

      /* Determine the absolute intersection points. */
      var xi = x2 + rx;
      var xi_prime = x2 - rx;
      var yi = y2 + ry;
      var yi_prime = y2 - ry;

      return [xi, xi_prime, yi, yi_prime];
    }
  </script>
</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)