Raphadasilva Raphadasilva - 1 month ago 6
JSON Question

D3 circle object has no properties

I'm working on a special type of map with D3, which combines polygons and points.

For that, I use two json file. The first one, with polygons, is formated like this :

{
"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 ] ] ] ] } }
]
}


On the other hand, I've got this json file with my points :

{"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 ] } }
]}


My goal is to link polygons and points on mouseover baser on "common_property" vales :


  • when you mouseover a polygon, the point with the same "common_property" has a different colour

  • if you mouseover a points, all the polygons with the same "common_property" has the same colour.



Theorically, it's simple if I make good selections in my script. But there is something wrong with my points.

At first, I made my css sheet, and put as first variables projection, path generator, svg, etc...

Then, I used queuejs to read several files before my main function :

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

THE CODE
});


Inside the main function, I wrote this for displaying polygons :

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


And this for displaying points :

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)


Nothing complicated so far, exept that I've no properties for places_points variable. If I test this :

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


The console displays this :

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

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


So it worked fine for polygons, there are properties and everything, but for the points I've got type "Polygon" instead of "Feature", and I don't get why very well...

EDIT : used v3 of D3 to made this, not the last one !

Answer

NEW ANSWER FOR COMMENTS:

Ok, I knew it had to do with the .datum call but my initial answer was incorrect. In this case you are re-binding your data with the .datum and losing your properties property. So simply remove it and do your calculations in the path 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);
  })
});

Here's some runnable code.