Обработка многоугольников d3

Question

Ответ на чертеж многоугольника хорошо работает для одного многоугольника. Однако, если есть более одного полигона? Просто добавление дополнительного многоугольника с точками кажется неработоспособным, хотя использование «select all» показало бы, что было бы неплохо добавить еще несколько полигонов без особых проблем.

У нас есть массив из полигонов, каждый из которых из которых имеет атрибут «Точки», который представляет собой массив точек.

Первый массив с многоугольником, очевидно, должен быть отображен, а точечные массивы каждого элемента обработаны, как описано. Но как выполнить эту двухуровневую структуру с помощью d3?

Proper format for drawing polygon data in D3

Answer 1

Ответ прост и движущийся прямо вперед. Просто передайте массив полигонов как данные для выбора d3. В вашем случае кажется, что вы используете массив многоугольников, которые являются составными объектами, каждый из которых имеет ключ под названием «Точки». Я предполагаю, что это выглядит как this-

var arrayOfPolygons = [{ 
    "name": "polygon 1", 
    "points":[ 
     {"x":0.0, "y":25.0}, 
     {"x":8.5,"y":23.4}, 
     {"x":13.0,"y":21.0}, 
     {"x":19.0,"y":15.5} 
    ] 
    }, 
    { 
    "name": "polygon 2", 
    "points":[ 
     {"x":0.0, "y":50.0}, 
     {"x":15.5,"y":23.4}, 
     {"x":18.0,"y":30.0}, 
     {"x":20.0,"y":16.5} 
    ] 
    }, 
    ... etc. 
]; 

Вы просто должны использовать d.Points вместо d при написании функции эквивалентной карты, которая может быть записана следующим образом-

vis.selectAll("polygon") 
    .data(arrayOfPolygons) 
    .enter().append("polygon") 
    .attr("points",function(d) { 
    return d.points.map(function(d) { 
     return [scaleX(d.x),scale(d.y)].join(","); 
    }).join(" "); 
    }) 
    .attr("stroke","black") 
    .attr("stroke-width",2); 

Вы можете проверить после работы JSFiddle для проверки.

EDIT- Тот же пример, что и выше, с выпуклой оболочкой для выполнения полных полигонов. http://jsfiddle.net/arunkjn/EpBCH/1/ Обратите внимание на разницу в многоугольнике # 4