无法弄清楚如何映射单独的点

Question

我是d3的新手，希望有人可以帮我弄清楚我做错了什么。我想将一组坐标作为点映射到地图上。

我使用Mike Bostock的机场voronoi地图作为起点，到目前为止我已经完成了基本地图的工作。我甚至可以根据.tsv：

中的坐标覆盖我想要的点数

不幸的是，蓝点被绘制为单个元素，我想为每个点创建单独的路径或圆圈。到目前为止，这是我的代码：https://jsfiddle.net/cerealcommas/ofmz52uu/3/

我也有以下JSON格式的数据，但说实话，JSON语法完全让我困惑，所以我不确定如何正确操作它。

{
"type": "FeatureCollection",
"features": [{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [27.47197, -80.32435]
    },
    "properties": {}
},

        ...

 {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [26.25161, -81.82374]
    },
    "properties": {}
}]
}

Answer 1

您必须使用Point而不是MultiPoints类型迭代点并创建路径：

参考你的小提琴你现在的代码

//add points
svg.append("path")
    .datum({
    type: "MultiPoint",
    coordinates: lionfish
})
    .attr("class", "points")
    .attr("d", path);

使用Point

类型执行此操作

//add points
    lionfish.forEach(function(d){
        svg.append("path")
        .datum({
        type: "Point",
        coordinates: d
        })
        .attr("class", "points")
        .attr("d", path);
    });