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

我试图呈现从以下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>

虽然我看到控制台上生成的路径：页面保持空白。希望有任何帮助，谢谢！

来源

2017-01-23 cookiedookie

我不能再生的问题（图未呈现，在所有），你可以在这里或在创造的jsfiddle一个片段，用于JSON文件数据，你可以使用一些虚拟对象。 –

嘿感谢您花时间回复，感谢您。这里是jsfiddle：https：//jsfiddle.net/Lzx5rnzy/ – cookiedookie

正如在其他答案的评论中指出的那样，绘图发生在屏幕之外。这是诊断d3.js maps的常见问题：没有错误，但没有明显的数据。在这种情况下，通常问题是您选择了不正确的投影参数。

如果我代替你topojson为世界JSON，这是我的结果：

它在180度的东/西和五度为中心以北。这集中在印度尼西亚东部的太平洋。然而，新加坡东部大约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)

和你的数据（和代码从上面），我是这样的：

而且，用墨卡托投影，你并不需要旋转使用的地图是正确对齐不管你把它放在什么位置（与锥形投影不同）。只需将它置于位于特征中心的坐标就足够了。

来源

2017-01-24 03:33:46

嘿非常感谢！我只是想知道未来的任务，我该如何去确定我的投影参数？ – cookiedookie

投影选择可能会非常棘手，参数也是如此。这里有更多的评论允许这么说。通常在非极地地区使用墨卡托，您可以将其集中在感兴趣区域中心的经度和纬度。从小规模开始（比如说200）可以帮助您了解您的兴趣区域是否位于中心或附近。对于许多地区，都有标准化的地图预测，这些预测会在网站上列出，如spatialreference.org/。将这些转换为在d3中使用通常不会太困难，并且许多关于SO的问题有助于这样做。 –

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

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

来源

2017-01-23 06:49:07 Dummy

嘿@Dummy谢谢你花时间回答，我只是尝试过，但屏幕上仍然没有任何东西出现。我的想法是在路中配置的风格，将已经使得它缺乏色彩 – cookiedookie

@cookiedookie你的路径是在你的路径的坐标移出含'svg'看的视口，它首先移动到** **负715水平，这是不是在你的'svg'的视口内 – Dummy

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

回答

相关问题