2D多边形布尔运算使用D3.js SVG [英] 2D Polygon Boolean Operations with D3.js SVG
问题描述
我有2个简单的区域图，我创建使用D3.js与数据&下面的代码 - 让我们称它们图A & 图B 。
I have 2 simple area graphs I've created using D3.js with the data & code below - Let's call them Graph A & Graph B. I would like to use them to create 3 new paths/polygons based on how they intersect.
-
路径1
Path 1=Graph A-Graph BPath 2=Graph B-Graph APath 3=Graph B-Path 2orGraph AandGraph Bintersection
大多数视觉编辑器允许您执行这些布尔运算，请参阅： https： //en.wikipedia.org/wiki/Boolean_operations_on_polygons
Most visual editors allow you to perform these boolean operations, see: https://en.wikipedia.org/wiki/Boolean_operations_on_polygons
是否可以在D3.js中执行此操作？
Is it possible to do this in D3.js?
jsfiddle： https://jsfiddle.net/jvf1utmx /
jsfiddle: 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)");
推荐答案
我刚刚试用了我链接的 GreinerHormann 库。它与 d3 （它采用相同的方式输入，对象数组）非常好。
As a follow-up to my comment; I just tried out the GreinerHormann library I linked. It plays very nice with d3 (It takes input in the same manner, arrays of objects).
A - B 和 B - A 的快速示例：
<!DOCTYPE html>
<html>
<head>
<script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script src="https://rawgit.com/w8r/GreinerHormann/master/dist/greiner-hormann.min.js"></script>
</head>
<body>
<script>
// 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,
}];
var area = d3.svg.line()
.x(function(d){
return d.x;
})
.y(function(d){
return d.y;
});
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);
// Graph shapes
var graphA = svg.append("path")
.datum(dataA)
.attr("class", "area")
.attr("d", area)
.style({
fill: 'none'
});
var graphB = svg.append("path")
.datum(dataB)
.attr("class", "area")
.attr("d", area)
.style({
fill: 'none'
});
var AminusB = greinerHormann.diff(dataA, dataB);
var BminusA = greinerHormann.diff(dataB, dataA);
// Graph shapes
AminusB.forEach(function(d){
svg.append("path")
.datum(d)
.attr("class", "area")
.attr("d", area)
.style({
fill: 'steelblue',
opacity: 0.8
});
});
// Graph shapes
BminusA.forEach(function(d){
svg.append("path")
.datum(d)
.attr("class", "area")
.attr("d", area)
.style({
fill: 'orange',
opacity: 0.8
});
});
</script>
</body>
</html>
这篇关于2D多边形布尔运算使用D3.js SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
