D3.js 欧洲(如美国)的D3地图投影

D3.js 欧洲(如美国)的D3地图投影,d3.js,geojson,D3.js,Geojson,我对D3.js还很陌生,到目前为止,我已经能够在这里和那里找到我所有问题的答案,但是我还没有找到任何关于这个问题的答案 这是一个非常好的美国地图投影,显示阿拉斯加和其他地方移到了地图的底部(美国阿尔伯斯) 我正在为nuts 2010 europe绘制几张choropleth地图(欧洲划分为较小区域的官方方式),我需要做一些类似的事情,在地图底部或右侧以不同的矩形显示圭亚那和一些岛屿群。 有点像这样: 另外,我需要显示马耳他的变焦,这样你才能真正看到它的颜色 这是一个我的路径示例,从geojson

我对D3.js还很陌生,到目前为止,我已经能够在这里和那里找到我所有问题的答案,但是我还没有找到任何关于这个问题的答案

这是一个非常好的美国地图投影,显示阿拉斯加和其他地方移到了地图的底部(美国阿尔伯斯)

我正在为nuts 2010 europe绘制几张choropleth地图(欧洲划分为较小区域的官方方式),我需要做一些类似的事情,在地图底部或右侧以不同的矩形显示圭亚那和一些岛屿群。 有点像这样:

另外,我需要显示马耳他的变焦,这样你才能真正看到它的颜色

这是一个我的路径示例,从geojson中提取,一旦q3.js计算出它们:

....
<path id="ITI3" class="nut cat2" d="M519.439374985861..."></path>
<path id="ITI4" class="nut cat2" d="M496.3654726267817,575.02..."></path>
<path id="LT00" class="nut cat1" d="..."></path>
<path id="MT00" class="nut cat4" d="Z"></path>
<path id="LV00" class="nut cat1" d="M637.95Z"></path><path id="MT00" class="nut cat3" d="M517.0753838465" fill="#000"></path>
...
你建议做什么? 我是否需要在创建时为每个层创建多个不同的层,最好是采用albers USA投影并相应地修改它,还是在创建路径后以某种方式对其进行变换?或者是其他我还没想到的事情


谢谢,

我不会乱动实际的形状文件,只要创建一个新的投影即可。Albert USA的实施并不复杂:

function albersUsa(location) {
  var longitude = location[0],
      latitude = location[1];
  return (latitude > 50 ? alaska
      : longitude < -140 ? hawaii
      : latitude < 21 ? puertoRico
      : lower48)(coordinates);
}
功能阿尔伯苏萨(位置){
变量经度=位置[0],
纬度=位置[1];
返回(纬度>50?阿拉斯加)
:经度<-140?夏威夷
:纬度<21?产褥期
:lower48)(坐标);
}


您应该能够创建适用于欧洲的版本

如果您检查此示例如何在欧洲使用阿尔伯斯投影,我相信您将能够轻松地将其调整到您的缩放、旋转和边界首选项:

您只需调整网页映射脚本中的参数(代码部分从上面复制):


可以使用墨卡托投影。我认为显示其他领土的最佳选择是制作单独的图表。您可以将组添加到主svg图形并对其进行转换。这篇文章解释了如何在d3中正确地制作贴图:。我想我需要比几个贴图更高性能的东西。。。。特别是考虑到我要准备的合唱曲的数量。我正在寻找一个投影,或者一种修改投影的方法……谢谢你,亚当,这似乎是正确的路线(如果我有足够的声誉,我会给你投票)。有人知道有没有关于如何在任何地方进行投影的信息吗?这里有一点信息:你最好阅读Albert USA的源代码:完全公开-我以前没有这样做过,但它看起来确实可行
function albersUsa(location) {
  var longitude = location[0],
      latitude = location[1];
  return (latitude > 50 ? alaska
      : longitude < -140 ? hawaii
      : latitude < 21 ? puertoRico
      : lower48)(coordinates);
}
albers = d3.geoAlbers()
    .rotate([-20.0, 0.0])
    .center([0.0, 52.0])
    .parallels([35.0, 65.0])
    .translate([width / 2, height / 2])
    .scale(700)
    .precision(.1)