D3 circle 객체에는 속성이 없습니다.

Question

폴리곤과 점을 결합한 D3이있는 특수한 유형의 맵에서 작업하고 있습니다.

그 때문에 2 개의 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 a point, 같은 "common_property"를 가진 모든 다각형들은 같은 색깔을 가지고 있습니다.

이론 상으로는 스크립트에서 좋은 선택을하면 간단합니다. 하지만 내 점수에 문제가있다.

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

    THE CODE 
    }); 

: 처음에는

, 나는

그런 다음, I used queuejs 내 주요 기능하기 전에 여러 파일을 읽을 ... 내 CSS 시트를 만들고, 첫번째 변수 프로젝션, 경로 생성, SVG 등으로 넣어 표시 포인트

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) 

아무 것도 복잡하지 않지만 exept는 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 : 마지막으로 아니라 이것을 만든 D3의 v3를 사용! 코멘트에 대한

Answer 1

NEW 답변 :

좋아, 나는 그것이 .datum 호출해야했다 알았지 만 나의 초기 대답은 잘못되었습니다. 이 경우 .datum으로 데이터를 다시 바인딩하고 속성 속성을 잃게됩니다. 그래서 단순히 경로 d 할당 자에 계산을 제거하고 수행

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입니다.