d3.js вычисляет логическое значение пути между эллипсами и кругами

Question

Мне нужно разделить несколько перекрывающихся эллипсов в SVG по всем пересечениям пути. Целью этого является диаграмма Венна. Диаграмма Венна Бена Фредриксона дает вам часть пути, вычисляя пересечения, но не вычисляет все возможные пересечения между произвольным числом эллипсов. Его методы не вычисляют выпуклые (разностные) области, только пересечения и не обрабатывают эллипсы.

Я создал непропорциональную симметричную схему Венна в d3 и хотел бы создать пути для всех возможных областей, а не только для пересечений.

Если нет доступного метода javascript, если кто-то может помочь прояснить математику, это также будет приемлемо.

Мой подход до сих пор выглядит так:

1. найти точки пересечения путей окружности эллипса (как?)
2. генерировать сегменты дуги между этими точками, используя радиусы эллипса
3. соединить сегменты дуги с новыми путями

Так что в следующем скрипте мне нужно будет разделить эти эллипсы по каждому пересечению пути, генерируя 18 отдельных путей.

возиться здесь

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