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

标签 javascript d3.js svg

如何绘制:

enter image description here

用 D3?

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

最佳答案

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

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

添加一个定义 masksdefs 元素和一个 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>

关于javascript - 用D3绘制三个相互交织的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32543305/

相关文章:

javascript - 如何编写一个可以适应稍微不同的用例的 JavaScript 模块?

jquery - 更改内联 SVG 的描边颜色

html - 纯 CSS 倾斜/圆形标签

php - 如何让javascript打开php文件?

javascript - 图表最小值 (Chart.js)

javascript - 单击搜索图标时如何禁用背景?

javascript - d3 : Why does this function not remove elements?

javascript - dc.js 根据第一个图表中的标准向多个图表中的数据点添加类

javascript - 在 DC.js 中呈现多折线图

html - 忽略 SVG 纵横比并拉伸(stretch)至 100% 窗口大小