Question

我有一个邮政编码质心点的geoJSON，我正在D3.js地图上绘图。我可以让他们显示但我无法调整点的大小。我假设.attr（＆＃34; r＆＃34;，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);
});

您可能需要在这些点上进行转换才能正确渲染它们（我猜）。在这种情况下，您可以使用以下代码。（我使用的转换函数需要绘制在使用特定投影构建的地图上具有lat，long信息的数据。）

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

D3.js在地图上的点数

1 个答案: