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

我能够将Click，mouseover，...功能添加到我的维恩。

以下是问题：

向Circles（集合A或B）添加功能可以正常工作。

为交点添加功能（设置A交叉集B）可以正常工作。

我需要向Except Area添加一些功能（设置A除了设置B）

这个问题有点帮助：2D Polygon Boolean Operations with D3.js SVG

但是我没有运气这个工作。

尝试使用：clipperjs或Greiner-Hormann polygon clipping algorithm查找除区域但无法使其正常工作。

更新1：

此问题中的代码是从venn.js示例中复制的：http://benfred.github.io/venn.js/examples/intersection_tooltip.html

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

Answer 1

也许你可以这样做......

给出2个重叠的圆圈，

找到两个交叉点，
手动创建一条路径，该路径沿着圆圈A从IP1到IP2，然后沿着圆圈B从IP2回到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个“重叠”级别......

完全包含在C |中两个AB IP都在C
部分重叠; C“切入”A∩B| 只有一个AB IP在C
A∩B完全在C |之外没有AB IP在C

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

中

总的来说，你需要3点才能为3个重叠的圆圈创建路径。前两个是沿着C“切入”A∩B。那些是......

A
B

对于路径的第3点，这取决于你是否想要（i）A∩B∩C或（ii）A∩B\ C ......

（i）A∩B∩C：C中包含的AB交叉点

（ii）A∩B\ C ：C中包含的AB交叉点 NOT

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

奖励 - 获得2个圈子的任意小节

值得注意的是，你可以通过选择正确的大弧标志和 sweep-flag 来获得任何小节。聪明地挑选，你可以得到......

圆圈A（作为路径）
圆圈B（作为路径）
排除B - 在所示示例中
B排除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.

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

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

1 个答案: