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