代码之家 › 专栏 › 技术社区 › ParadoxicalEnigma

为什么这个拓扑结构在D3中呈现得如此之小?(简单示例)

topojson geojson d3.js html javascript

ParadoxicalEnigma · 技术社区 · 7 年前

这是我的html和d3 js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NY State Districts Demo</title>
    </head>
    <body>
        <h1>Hello</h1>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
        <script>
            /* JavaScript goes here */
            var width = 960, height = 1160;
            var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

            d3.json("./ny_bounds.json", function(error, ny){
                if(error) return console.error(error);
                console.log(ny);
                svg.append("path")
                    .datum(topojson.feature(ny, ny.objects.ny_bounds))
                    .attr("d", d3.geoPath().projection(d3.geoAlbersUsa()));
            });
        </script>
    </body>
</html>

Here

我承认我对d3和geo/topoJSON知之甚少,但我只是停留在这一点上。如果有人有任何资源,我可以学习更多关于这些主题,那也太好了。但正如我之前所说,主要问题是地图太小,我似乎无法居中/缩放它。

1 回复 | 直到 7 年前

Andrew Reid 7 年前

您正在使用投影来投影数据,该投影旨在投影整个美国的点,包括夏威夷和阿拉斯加。纽约将是这个投影区域的一小部分。缩放任何地图投影都会朝投影中心放大-d3不知道放大到特定位置,因此当你放大时,纽约会从投影边缘掉下来。

由于AlbersUsa投影是一个复合投影(允许包括阿拉斯加、夏威夷),因此实际上是在一个平面上组合的多个Albers投影。由于其复合性质,更难操作。为了保持简单,我建议使用普通的阿尔伯斯投影。这还允许您根据纽约州定制投影。

阿尔伯斯投影有两条标准平行线,它们是与地球表面相交的投影平面的平行线(它是圆锥形投影)。标准平行线应位于相关区域,一个在下半部分,一个在上半部分(由于这些平行线与地球相交,因此沿这些平行线的失真最小)。对于纽约州来说,像北纬41度和44度这样的平行线是可行的。

d3.geoAlbers()
  .center([0,42.954])
  .rotate([75.527,0])
  .parallels([41,44])
  .translate([width/2,height/2])
  .scale(k) // scale factor

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Alex · 在轻量级中同时解构和不解构变量

3 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

4 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

4 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前