我有 2 个使用 D3.js 创建的简单面积图,数据和代码如下 - 让我们称它们为Graph A
& Graph B
。我想用它们根据它们的相交方式创建 3 个新路径/多边形。
-
Path 1
= Graph A
- Graph B
-
Path 2
= Graph B
- Graph A
-
Path 3
= Graph B
- Path 2
or Graph A
and Graph B
路口
大多数可视化编辑器允许您执行这些布尔运算,请参阅:https://en.wikipedia.org/wiki/Boolean_operations_on_polygons https://en.wikipedia.org/wiki/Boolean_operations_on_polygons
在 D3.js 中可以做到这一点吗?
jsfiddle:https://jsfiddle.net/jvf1utmx/ https://jsfiddle.net/jvf1utmx/
图表定义:
// data
var dataA = [
{ x: 0, y: 100, },
{ x: 100, y: 150, },
{ x: 200, y: 350, },
{ x: 300, y: 200, },
];
var dataB = [
{ x: 0, y: 200, },
{ x: 100, y: 100, },
{ x: 200, y: 250, },
{ x: 300, y: 150, },
];
// Graph shapes
var graphA = svg.append("path")
.datum(dataA)
.attr("class", "area")
.attr("d", area)
.style({fill: '#bbbb00', opacity: 0.8});
var graphB = svg.append("path")
.datum(dataB)
.attr("class", "area")
.attr("d", area)
.style({fill: '#666666', opacity: 0.8});
我对剪辑路径的尝试:
// Clipping attempts
var graphBClip = svg.append("clipPath")
.attr('id','graphBClip')
graphBClip.append(graphB);
graphA.attr("clip-path","url(#graphBClip)");