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

我的目标是将鼠标悬停上的多边形和点与＃34; common_property＆＃34;瓦莱斯：

当您将鼠标悬停在多边形上时，具有相同＆＃34; common_property＆＃34;的点有不同的颜色
如果你鼠标悬停一个点，所有多边形都具有相同的＆＃34; common_property＆＃34;颜色相同。

理论上，如果我在我的剧本中做出很好的选择，那就很简单了。但是我的观点有问题。

首先，我制作了我的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
   });

在main函数中，我写了这个用于显示多边形：

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

所以它适用于多边形，有属性和一切，但对于我已经得到的类型＆＃34; Polygon＆＃34;而不是＆＃34;功能＆＃34;，我不明白为什么......

编辑：使用D3的v3来制作，而不是最后一个！

Answer 1

评论的新答案：

好的，我知道这与.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。

D3圈子对象没有属性

1 个答案: