javascript - 用D3绘制三个相互交织的圆圈

Question

如何绘制:

用 D3？

(我知道需要分别绘制所有弧形子部分的复杂答案，但有没有更简单的解决方案？最简单的答案。)

Answer 1

不确定这是否是最简单的解决方案，但您基本上只需要一堆圆圈。

实际上，您的数据集中只有三个圆圈。

添加一个定义 masks 的 defs 元素和一个 clip-path 将确保圆圈像在您的图像中一样 chop 。

只要看一下示例，您就会明白这一点。这可能不是最优雅的解决方案，但它确实有效。

var margin        = { top: 0, right: 0, bottom: 0, left: 0}, 
    w             = 480 - margin.left - margin.right,
    h             = 480 - margin.top - margin.bottom,
    circleRadii   = 100,
    circleData    = [{x: 160, y: 160, c: "lawngreen"}, {x: 260, y: 200, c: "fuchsia"}, {x: 190, y: 260, c: "blue"}];

var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.left + margin.right);

var mask = svg.append("defs")
.selectAll("mask")
.data(circleData)
.enter()
.append("mask")
.attr("id", function(d,i) { return "circle_" + i});

mask
.append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii)
.attr("fill", "white");
mask
.append("circle")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii - 30)
.attr("fill", "black");

var clip = svg.select("defs")		
.append("clipPath")
.attr("id", "clip-last-circle");

clip.append("circle")
.attr("cx", circleData[1].x)
.attr("cy", circleData[1].y)
.attr("r", circleRadii - 30);

clip.append("circle")
.attr("cx", circleData[1].x/4)
.attr("cy", circleData[1].y)
.attr("r", circleRadii);

var group = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var circles = group.selectAll("circle")
.data(circleData)
.enter()
.append("circle");

var circleAttr = circles
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", circleRadii)
.attr("mask", function (d,i) {return "url(#circle_"+i+")"})
.style("fill", function (d) { return d.c; });

var clipedCircle = group.append("circle")
.attr("cx", circleData[0].x)
.attr("cy", circleData[0].y)
.attr("r", circleRadii)
.attr("mask", "url(#circle_0)")
.attr("clip-path", "url(#clip-last-circle)")
.style("fill", circleData[0].c);

body {
    margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>