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库，绘制了我的venn图，并使其工作得非常完美。

使用此代码：

            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);
                });

我可以添加点击鼠标.我的维恩的功能。

这里的问题是：

向圆(设置A或B)添加功能可以很好地工作。

将功能添加到交集(集合A、相交集B)可以很好地工作。

我需要添加一些功能到除了区域(设置A，除了设置B)

这个问题有点帮助：基于D3.js SVG的二维多边形布尔运算

但我没能成功。

尝试找出除了区域使用：剪报或Greiner-Hormann多边形裁剪算法，但无法使它工作。

更新1:

此问题中的代码是从venn.js示例：tooltip.html复制的。

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

Answer 1

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

有两个重叠的圆圈，

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

在创建了该路径(涵盖A(B除外))之后，您可以随意设置它的样式，并添加单击事件(等等)。到SVG路径元素。

查找交点(IP)

圆-圆交点

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>

​

如果您的Venn图中有更复杂的重叠(3+区域重叠)，那么这显然会变得更复杂，但是我认为您仍然可以针对这些情况扩展这种方法。

快速(某种)注意事项，以处理3套交叉口，即。AB\C或A∩B∩C∩

A、∩B与圆C之间有3个“层次”重叠。

• 完全包含在C中，两个AB IP都在C中
• 部分重叠；C“割断”A∩B \\只有一个AB IP在C中
• A∩B完全在C#之外没有AB is在C中

注:这是假设C不是A或B的子集或完全包含--否则，两个BC in都可以包含在A中。

总之，您需要3个点来为3个重叠的圆圈创建路径。前2条是沿着C线，它“穿过”一个∩B.

1. 载于A中的BC交点
2. B中包含的交流交点

对于路径的第三点，它取决于(i)A∩B∩C还是(Ii)A∩B\C.

1. (i) A∩B∩C：C中包含的AB交点 (ii) A∩B\C：C中未包含的AB交点

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

奖金--获得2圈的任何分段

值得注意的是，您可以通过选择正确的large-arc-flag和扫描标志来获得任何分段。明智地选择然后你就能得到..。

1. 圈A(作为路径)
2. 圆B(作为路径)
3. A排除B-如图所示
4. B不包括A
5. A工会B
6. A互联网络B

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

一些资源。

椭圆曲线命令的W3C站点

弧形标志的很好解释

大弧标志：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).