Невозможно обрезать многоугольник с помощью d3.js

Question

Я пытаюсь взять многоугольник и разрезать другой многоугольник с его пересекающейся областью. Я думал, что клип метода d3.geom.polygon будет работать, но я, кажется, получаю всевозможные странные проблемы, когда я пытаюсь использовать его в скрипте ниже.

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

наконец результат:

DEMO: http://jsfiddle.net/335089x2/12/

Теперь вы можете добавить data() функцию и весы.