无法使用 d3.js 裁剪多边形

Question

我正在尝试取一个多边形并用它的相交区域切割另一个多边形。我认为 d3.geom.polygon 的方法 clip 会起作用，但是当我在下面 fiddle.

中尝试时，我似乎遇到了各种奇怪的问题

http://jsfiddle.net/RussellAsher/335089x2/8/

如果有人知道有或没有 d3.js 我将如何做到这一点，我将永远感激不已。

我尝试使用的 d3 种方法：

var p1 = d3.geom.polygon(arrayOfPolygons[0].points);
var p2 = d3.geom.polygon(arrayOfPolygons[1].points);
p2.clip(p1);

Answer 1

d3.js来源：

https://github.com/mbostock/d3/blob/master/src/geom/polygon.js#L49-L86

在第 49 行，您可以阅读：

// The Sutherland-Hodgman clipping algorithm.
// Note: requires the clip polygon to be counterclockwise and convex.
d3_geom_polygonPrototype.clip = function(subject) {
...
}

您应该像这样使多边形反向：

你的情况：

var vis = d3.select("body").append("svg").attr({
    width: 1000,
    height: 667
}),

// I deleted scales there to make the code smaller

arrayOfPolygons = [{
    name: "polygon 1",
    points: []
}, {
    name: "polygon 2 ",
    points: []
}];

// clockwise polygon
arrayOfPolygons[0].points = [
    [5.5, 15.5],
    [24.0, 15.5],
    [20.5, 20],
    [12.0, 45.5],
    [4.0, 20]
];
// counterclockwise polygon
arrayOfPolygons[1].points = [
    [4.5, 24.5],
    [14.0, 24.5],
    [18.5, 20],
    [0.0, 20]
];

var p1 = d3.geom.polygon(arrayOfPolygons[0].points);
var p2 = d3.geom.polygon(arrayOfPolygons[1].points);
var p_x = p1.slice();// cloned polygon
p2.clip(p_x);// cloned polygon clipped

// the first polygon
vis.append("svg:polygon").attr({
    points: p1,
    stroke: "black",
    fill: "none"
});

// the second polygon
vis.append("svg:polygon").attr({
    points: p2,
    stroke: "black",
    fill: "none"
});

// clipped part
vis.append("svg:polygon").attr({
    points: p_x,
    stroke: "red",
    fill: "yellow"
});

最终结果：

演示：http://jsfiddle.net/335089x2/12/

现在您可以添加 data() 函数和尺度。

无法使用 d3.js 裁剪多边形

Cannot clip polygon using d3.js

javascript

geometry

polygons

d3.js