Объект D3 circle не имеет свойств

Question

Я работаю над специальным типом карты с D3, который объединяет многоугольники и точки.

Для этого я использую два файла json. Первый из них, с полигонами, отформатированный как это:

{ 
    "type": "FeatureCollection", 
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, 

"features": [ 
{ "type": "Feature", "properties": { "id": "101", "name": "Place 1", "common_property":"P1" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ bla bla bla ] ] ] ] } }, 
{ "type": "Feature", "properties": { "id": "102", "name": "Place 2", "common_property":"P1" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ bla bla bla ] ] ] ] } }, 
{ "type": "Feature", "properties": { "id": "103", "name": "Place 3", "common_property":"P2" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ bla bla bla ] ] ] ] } } 
] 
} 

С другой стороны, у меня есть этот файл JSON с моей точки:

{"type": "FeatureCollection","crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, 

"features": [ 
{ "type": "Feature", "properties": { "common_property": "P1" }, "geometry": { "type": "Point", "coordinates": [ 7.741, 48.58344 ] } }, 
{ "type": "Feature", "properties": { "common_property": "P2" }, "geometry": { "type": "Point", "coordinates": [ 7.76840, 48.58737 ] } } 
]} 

Моя цель состоит в том, чтобы связать многоугольников и точек при наведении курсора мыши на низменном «common_property» долины:

• при наведении курсора мыши на полигон, точка с тем же «common_property» имеет другой цвет
• если вы mouseover точки, все полигоны с одинаковым «common_property» имеют один и тот же цвет.

Теоретически это просто, если я сделаю хороший выбор в своем сценарии. Но что-то не так с моими очками.

Сначала я сделал мой CSS лист, и поставить в качестве первых переменных проекции, генератор пути, SVG и т.д. ...

Затем I used queuejs прочитать несколько файлов перед моей главной функцией:

queue() 
    .defer(d3.json,"data/polygons.json") 
    .defer(d3.json, 'data/points.json') 
    .await(function(err, polygons, points) { 

    THE CODE 
    }); 

Внутри основной функции, я написал это для отображения многоугольников:

polyg = svg.append("g") 
    .selectAll("path") 
    .data(polygons.features) 
    .enter() 
    .append("path") 
    .attr("class", "polygon_area") 
    .attr("d", path) 

И это для отображения пунктов:

places_point = svg.append("g") 
    .selectAll("path") 
    .data(points.features) 
    .enter() 
     .append("path") 
     .datum(function(d){ 
      var origin = d.geometry.coordinates 
      var angle = scale*0.0000000018 
      return circle.angle(angle).origin(origin)(points.features) 
         }) 
     .attr("class", "point") 
     .attr("d", path) 

Ничего сложного до сих пор, кроме того, что у меня нет свойств для переменной places_points. Если я проверить это:

polyg.on('mouseover', function(d) {    
    console.log(d) 
    places_point.attr("fill", function(d){ 
     console.log(d)}) 
    }) 

консоли отображается это:

Object { type: "Feature", properties: Object, geometry: Object } 

Object { type: "Polygon", coordinates: Array[1] } 
Object { type: "Polygon", coordinates: Array[1] } 

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

EDIT: использовали v3 из D3, чтобы сделать это, а не последний!

Answer 1

НОВЫЙ ОТВЕТ НА КОММЕНТАРИИ:

Хорошо, я знал, что должен был сделать с .datum вызова, но мой первоначальный ответ был неверным. В этом случае вы повторно связываете свои данные с .datum и теряете свойство свойства. Так просто удалить его и сделать ваши расчеты в пути d Assigner:

pt_bv = svg.append("g") 
    .selectAll("path") 
    .data(bv.features) 
    .enter() 
    .append("path") 
    .attr("class", "point") 
    .attr("d", function(d){ 
    var origin = d.geometry.coordinates 
    var angle = scale * 0.0000000018 
    var rV = circle.angle(angle).origin(origin)(bv.features); 
    return path(rV); 
    }); 

bureaux.on('mouseover', function(d) { 
    console.log(d); 
    pt_bv.attr("fill", function(d) { 
    console.log(d); 
    }) 
}); 

Вот некоторые runnable code.