Javascript 为什么Svg路径显示在控制台中而不显示在屏幕上？

我想知道是否有人能帮我一把

我正试图从下面我转换的地图中绘制一幅新加坡地图

下面是我的代码：

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

当我看到控制台上生成的路径时：页面仍然为空。 非常感谢您的帮助，谢谢

您需要将笔划添加到路径中，因为默认情况下笔划为白色

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

---

如另一个答案的评论所述，绘图在屏幕外进行。这是对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)

上面的数据和代码，我得到了如下信息：

---

此外，使用墨卡托投影时，不需要使用“旋转”，因为无论在何处居中，贴图都正确对齐，这与圆锥投影不同。只需将其放在功能中心的坐标上就足够了。

Hey@Dummy感谢您花时间回答，我刚刚尝试过，但屏幕上仍然没有显示任何内容。我在想，path中配置的样式可能已经使它缺少了color@cookiedookie您的路径将从包含svg的视口中移出。查看路径的坐标，它首先水平移动到负715，它不在svgI的视口中。我无法重新生成问题图表根本没有呈现，您可以在这里或在JSFIDLE上创建一个代码段吗？对于JSON文件数据，您可以使用一些虚拟对象。嘿，感谢您花时间作出响应，非常感谢。这是JSFIDLE：嘿，非常感谢！我只是想知道，对于未来的任务，我该如何确定我的投影参数？投影选择可能很棘手，它的参数也是如此。这里有更多的话要说，然后评论允许。一般来说，如果墨卡托位于非极地区域，你可以将它置于你感兴趣区域中心的经纬度上。从一个小比例开始，比如说200可以帮助你看到你感兴趣的区域是否位于中心或中心附近。许多地区都有标准化的地图投影，这些投影在spatialreference.org/等网站上在线列出。将这些转换为d3中使用通常并不太困难，很多关于这方面的问题都有助于这样做。