用D3绘制三个交织在一起的圆圈

Question

如何绘制：

用D3？

（我知道复杂的答案需要分别绘制所有弧形子部分，但是有一个更简单的解决方案吗？最简单的胜利。）

Answer 1

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

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

添加定义defs和masks的{​​{1}}元素可确保圈子像在图片中一样拦截。

看看这个例子，你就会明白这个想法。这可能不是最优雅的解决方案，但它确实有效。

＆＃13;

＆＃13;

clip-path

＆＃13;

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

＆＃13;

body {
    margin: 0;
}

＆＃13;

＆＃13;

＆＃13;