venn.js 选择 Set[A] 除了 Set[B]

Question

我有这个代码：

var sets = [
    {sets: ['A'], size: 10},
    {sets: ['B'], size: 10},
    {sets: ['A','B'], size: 5}
];

var chart = venn.VennDiagram();
var div = d3.select("#venn").datum(sets).call(chart);

使用优秀的 venn.js 库，绘制了我的维恩图并且效果很好。

使用此代码：

            div.selectAll("g")
                .on("mouseover", function (d, i) {
                    // sort all the areas relative to the current item
                    venn.sortAreas(div, d);

                    // Display a tooltip with the current size
                    tooltip.transition().duration(400).style("opacity", .9);
                    tooltip.text(d.size + " items");

                    // highlight the current path
                    var selection = d3.select(this).transition("tooltip").duration(400);
                    selection.select("path")
                        .style("stroke-width", 3)
                        .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
                        .style("stroke-opacity", 1)
                        .style("cursor", "pointer");
                })

                .on("mousemove", function () {
                    tooltip.style("left", (d3.event.pageX) + "px")
                           .style("top", (d3.event.pageY - 28) + "px");
                })

                .on("click", function (d, i) {
                    window.location.href = "/somepage"
                })

                .on("mouseout", function (d, i) {
                    tooltip.transition().duration(400).style("opacity", 0);
                    var selection = d3.select(this).transition("tooltip").duration(400);
                    selection.select("path")
                        .style("stroke-width", 1)
                        .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
                        .style("stroke-opacity", 0);
                });

我可以为我的 venn 添加点击、鼠标悬停等功能。

问题是：

向圈子（集合 A 或 B）添加功能效果很好。

向交集添加功能（集合 A 与集合 B 相交）工作正常。

我需要在 Except Area (set A except set B) 中添加一些功能

这个问题有点帮助：

但我没能成功。

尝试使用 clipperjs or Greiner-Hormann polygon clipping algorithm 找出 Except area 但没成功。

更新 1：

本题代码复制自venn.js样例：http://benfred.github.io/venn.js/examples/intersection_tooltip.html

其他样本： https://github.com/benfred/venn.js/

Answer 1

也许你可以做这样的事情....

给定 2 个重叠的圆圈，

找到两个交点，
手动创建一条路径，从 IP1 沿着圆 A 到 IP2，然后从 IP2 沿着圆 B 回到 IP1。

创建该路径（涵盖 A，不包括 B）后，您可以根据需要设置样式并将点击事件（等）添加到该 SVG 路径元素。

查找交点（IP）

Circle-circle intersection points

var getIntersectionPoints = function(circleA, circleB){

  var x1 = circleA.cx,
      y1 = circleA.cy,
      r1 = circleA.r,
      x2 = circleB.cx,
      y2 = circleB.cy,
      r2 = circleB.r;

  var d = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
      a = (Math.pow(r1,2)-Math.pow(r2,2)+Math.pow(d,2))/(2*d),
      h = Math.sqrt(Math.pow(r1,2)-Math.pow(a,2));

  var MPx = x1 + a*(x2-x1)/d,
      MPy = y1 + a*(y2-y1)/d,
      IP1x = MPx + h*(y2-y1)/d,
      IP1y = MPy - h*(x2-x1)/d,
      IP2x = MPx - h*(y2-y1)/d,
      IP2y = MPy + h*(x2-x1)/d;

  return [{x:IP1x,y:IP1y},{x:IP2x,y:IP2y}]

}

手动创建路径

var getExclusionPath = function(keepCircle, excludeCircle){

  IPs = getIntersectionPoints(keepCircle, excludeCircle);

  var start = `M ${IPs[0].x},${IPs[0].y}`,
      arc1 = `A ${keepCircle.r},${keepCircle.r},0,1,0,${IPs[1].x},${IPs[1].y}`,
      arc2 = `A ${excludeCircle.r},${excludeCircle.r},0,0,1,${IPs[0].x},${IPs[0].y}`,
      pathStr = start+' '+arc1+' '+arc2;

  return pathStr;

}

var height = 900;
    width  = 1600;
   
d3.select(".plot-div").append("svg")
  .attr("class", "plot-svg")
  .attr("width", "100%")
    .attr("viewBox", "0 0 1600 900")

var addCirc = function(circ, color){
  d3.select(".plot-svg").append("circle")
  .attr("cx", circ.cx)
  .attr("cy", circ.cy)
  .attr("r", circ.r)
  .attr("fill", color)
  .attr("opacity", "0.5")
}

var getIntersectionPoints = function(circleA, circleB){
  
  var x1 = circleA.cx,
    y1 = circleA.cy,
    r1 = circleA.r,
    x2 = circleB.cx,
    y2 = circleB.cy,
    r2 = circleB.r;
 
var d = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
    a = (Math.pow(r1,2)-Math.pow(r2,2)+Math.pow(d,2))/(2*d),
    h = Math.sqrt(Math.pow(r1,2)-Math.pow(a,2));

var MPx = x1 + a*(x2-x1)/d,
    MPy = y1 + a*(y2-y1)/d,
    IP1x = MPx + h*(y2-y1)/d,
    IP1y = MPy - h*(x2-x1)/d,
    IP2x = MPx - h*(y2-y1)/d,
    IP2y = MPy + h*(x2-x1)/d;
  
  return [{x:IP1x,y:IP1y},{x:IP2x,y:IP2y}]

}

var getExclusionPath = function(keepCircle, excludeCircle){

  IPs = getIntersectionPoints(keepCircle, excludeCircle);
  
  var start = `M ${IPs[0].x},${IPs[0].y}`,
      arc1 = `A ${keepCircle.r},${keepCircle.r},0,1,0,${IPs[1].x},${IPs[1].y}`,
      arc2 = `A ${excludeCircle.r},${excludeCircle.r},0,0,1,${IPs[0].x},${IPs[0].y}`,
      pathStr = start+' '+arc1+' '+arc2;
  
  return pathStr;
  
}



var circleA = {cx: 600, cy: 500, r: 400};
var circleB = {cx: 900, cy: 400, r: 300};

var pathStr = getExclusionPath(circleA, circleB)

addCirc(circleA, "steelblue");
addCirc(circleB, "darkseagreen");

d3.select(".plot-svg").append("text")
  .text("Hover over blue circle")
  .attr("font-size", 70)
  .attr("x", 30)
  .attr("y", 70)

d3.select(".plot-svg").append("path")
  .attr("class","exlPath")
  .attr("d", pathStr)
  .attr("stroke","steelblue")
  .attr("stroke-width","10")
  .attr("fill","white")
  .attr("opacity",0)

.plot-div{
  width: 50%;
  display: block;
  margin: auto;
}

.plot-svg {
  border-style: solid;
  border-width: 1px;
  border-color: green;
}

.exlPath:hover {
  opacity: 0.7;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div class="plot-div">

</div>

如果您的维恩图中有更复杂的重叠（超过 3 个区域重叠），那么这显然会变得更复杂，但我认为您仍然可以针对这些情况扩展这种方法。

快速（有点）注意处理 3 个交叉点，即。 A∩B\C或A∩B∩C

A∩B和C圈有3个"levels"重合...

完全包含在 C 中 | 两个AB IP都在C
部分重叠； C"cuts through"A∩B | C中只有一个AB IP
A∩B完全在C之外| C 中没有 AB IP

注意：这是假设 C 不是 A 或 B 的子集或完全包含在其中——否则，例如，两个 BC IP 都可能包含在 A

您总共需要 3 个点来为 3 个重叠的圆创建路径。前 2 个沿着 C，其中 "cuts through" A∩B。那些是...

A包含的BC交点
B中包含的AC交点

路径的第3点，看你是要(i)A∩B∩C还是(ii)A∩B\C...

(i) A∩B∩C：C
中包含的AB交点
(ii) A∩B\C：AB交点NOT包含在C

有了这些点，您可以用适当的弧线手动绘制路径。

奖金 -- 获得 2 个圈子的任何小节

同样值得注意的是，您可以通过选择正确的 large-arc-flag 和 sweep-flag 来获得任何子部分。聪明地挑选，你会得到...

A圈（作为路径）
B圈（作为路径）
A 排除 B --在所示示例中
B排除A
A联合B
A与B相交

...以及一些与任何有用的东西都不匹配的更时髦的。

一些资源...

W3C site for elliptical curve commands

Good explanation for arc flags

大弧标志：A value of 0 means to use the smaller arc, while a value of 1 means use the larger arc.

扫旗：The sweep-flag determines whether to use an arc (0) or its reflection around the axis (1).

venn.js 选择 Set[A] 除了 Set[B]

venn.js selecting Set[A] except Set[B]

javascript

svg

d3.js

venn.js