javascript - 使用 D3.js 绘制 map 上的点

Question

我有一个邮政编码质心点的 geoJSON，我正在 D3.js map 上绘制它。我可以让它们显示，但我无法调整点的大小。我假设 .attr("r", 1) 会这样做，但我一定错过了一些东西。

        d3.json("ZipPoints.json", function (zipPoints) {
            svg.selectAll("g")
               .data(zipPoints.features)
               .enter()
               .append("path")
               .attr("d", path)
               .attr("r", 1)
               .style("fill", "red");
         });

编辑:

        d3.json("ZipPoints.json", function (zipPoints) {
            points.selectAll("circle")
               .data(zipPoints.features)
               .enter()
               .append("circle")
               .attr("r", 1.5)
               .attr("transform", function(d, i) {
                   return "translate(" + projection(zipPoints.features[i].geometry.coordinates) + ")";
                })
               .style("fill", "red")
               .classed("point", true);     
        });

Answer 1

您可以尝试以下操作。

var pins = svg.append("g");
d3.json("ZipPoints.json", function(zipPoints) {
    pins.selectAll("circle")
        .data(zipPoints.features)
        .enter()
        .append("circle")
        .attr("r", 5)
        .style("fill", "red")
        .classed("pin", true);
});

您可能需要对这些点进行转换才能正确渲染它们(我猜)。在这种情况下，您可以使用以下代码。 (我使用的转换函数需要在使用特定投影构建的 map 上绘制具有纬度、经度信息的数据)。

.attr("transform", function(d) {
    /*whatever transformation that needs to be done*/
    return "translate(" + projection([ d.lon, d.lat ]) + ")";
})