为什么 Svg 路径出现在控制台中而不出现在屏幕上？

Question

我想知道是否有人可以帮我一把。

我正在尝试从已转换的以下topoJSON 渲染新加坡地图。

下面是我的代码：

<style>
    path {
        /*fill: #ccc;*/
        stroke: rgba(12, 12, 12, 0.96);
        stroke-linejoin: round;
    }
</style>
    <svg width="900" height="600"></svg>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
     var svg = d3.select("svg"),
         width = +svg.attr("width"),
         height = +svg.attr("height");

//     var projection = d3.geoAlbers();
     var projection = d3.geoMercator()
         .center([0, 5 ])
         .scale(900)
         .rotate([-180,0]);

     var path = d3.geoPath(projection);

    d3.queue()
        .defer(d3.json, "data/sgtopo.json")
        .await(ready);

    function ready(error, sg){
        if(error) throw error;
        var topofeature = topojson.feature(sg, sg.objects["sg-"]);
        svg.append("g")
         .selectAll("path")
         .data(topofeature.features)
         .enter()
         .append("path")
         .attr("d", path);


    }
</script>
</html>

当我看到控制台上生成的路径时：页面保持空白。 感谢您的帮助，谢谢！

Answer 1

正如其他答案的 cmets 所述，绘图发生在屏幕外。这是 d3.js 地图故障排除的常见问题：没有抛出错误，但没有明显地绘制数据。在这种情况下，通常问题是您选择了不正确的投影参数。

如果我将你的 topojson 替换为世界 json，这就是我的结果：

它以东/西 180 度和北 5 度为中心。它位于印度尼西亚东部的太平洋地区。然而，新加坡位于东约 104 度和北约 1 度。所以你的投影参数应该更像：

     var projection = d3.geoMercator()
     .center([103.833333, 1.283333 ])
     .scale(900)

事实上，您的比例可能会更大，以便进一步放大。使用 900 的比例和上面指定的中心，我得到这样的结果：

使用

     var projection = d3.geoMercator()
     .center([103.833333, 1.283333 ])
     .scale(60000)

你的数据（和上面的代码），我得到了类似的东西：

此外，对于墨卡托投影，您不需要使用旋转，因为无论您将地图居中在哪里（与圆锥投影不同），地图都会正确对齐。只需将其置于特征中心的坐标上就足够了。

Answer 2

您需要将stroke 添加到您的路径中，因为默认情况下它是白色的。

svg.append("g")
     .selectAll("path")
     .data(topofeature.features)
     .enter()
     .append("path")
     .attr("d", path)
     .attr("stroke", "black"); <-- Add this