1

我需要通过所有路径交叉点拆分 SVG 中的多个重叠椭圆。这样做的目的是为了一个维恩图。 Ben Fredrickson 的维恩图通过计算交叉点为您提供了部分路径，但并未计算任意数量的椭圆之间的所有可能交叉点。他的方法不计算凸（差）区域，只计算交点，也不处理椭圆。

我在 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');
4

0 回答 0