d3.js计算椭圆和圆之间的路径布尔值

Question

我需要通过所有路径交叉点在SVG中分割多个重叠的椭圆。这个目的是为了维恩图。 Ben Fredrickson's venn diagram通过计算交叉点让您了解其中的一部分，但不计算任意数量的椭圆之间的所有可能交叉点。他的方法不计算凸（差）区域，只计算交叉点，不处理椭圆。

我在d3中创建了一个非比例，对称的维恩图布局，并希望为所有可能的区域生成路径，而不仅仅是交叉点。

如果没有可用的javascript方法，如果有人可以帮助澄清也可以接受的数学方法。

到目前为止我的方法看起来像这样：

1. 找到椭圆环绕路径的交点（如何？）
2. 使用椭圆半径
在这些点之间生成弧段
3. 将弧段连接到新路径

因此，在下面的小提琴中，我需要按每个路径交叉点分割这些椭圆，生成18个不同的路径。

fiddle here

var width = 450,
   height = 400

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


svg.append("svg:ellipse")
.attr("cx", 100)
.attr("cy", 100)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(128,255,128,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px');


svg.append("svg:ellipse")
.attr("cx", 150)
.attr("cy", 100)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(255,128,128,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px');


svg.append("svg:ellipse")
.attr("cx", 150)
.attr("cy", 100)
.attr("rx", 100)
.attr("ry",50)
.style("fill", 'rgba(128,128,255,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px');

svg.append("svg:ellipse")
.attr("cx", 190)
.attr("cy", 130)
.attr("rx", 100)
.attr("ry",50)
.style("fill", 'rgba(255,128,255,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px');