Javascript 缩放d3 v4映射以适合SVG（或根本不适合）

我想把这张美国地图缩小一点。或者是我的SVG，甚至是手动

这是我最简单的代码，来自：

function initializeMapDifferent(){
    var svg = d3.select("#map").append("svg")
        .attr("width", 1000)
        .attr("height", 500);



    d3.json("https://d3js.org/us-10m.v1.json", function (error, us){

        svg.append("g")
            .attr("class", "states")
            .selectAll("path")
            .data(topojson.feature(us, us.objects.states).features)
            .enter().append("path")
            .attr("fill", "gray")
            .attr("d", d3.geoPath());
    });
}

我试过这样的方法：

  var path = d3.geoPath()
  .projection(d3.geoConicConformal()
      .parallels([33, 45])
      .rotate([96, -39])
      .fitSize([width, height], conus));

但每次我向path变量添加任何内容时，我都会从D3的内部部分得到NAN错误。谢谢你的帮助

为什么数据不能正确投影 关键问题是，您的数据已经被预测。D3地质投影使用未投影的数据，或以lat-long对进行。WGS84基准中的数据。实际上，d3地质投影采用球坐标，并将其转换为平面笛卡尔x，y坐标

您的数据与此不符-它已经是平面的。你能看得最清楚，因为阿拉斯加不是它应该在的地方（除非有人改变了阿拉斯加的拉特-长对，这是不可能的）。其他迹象和症状的已经预测的数据可能是一个功能，涵盖整个地球，并没有错误

这是一个复合投影，因此很难取消投影，但您可以在d3.js中显示已经投影的数据

“投影”已投影的数据 零投影： 最简单的是，您可以将投影定义为空：

var path = d3.geoPath(null);

这将从geojson几何图形中获取x，y数据，并将其显示为x，y数据。但是，如果x、y坐标超过svg的宽度和高度，则地图将不包含在svg中（如您在示例中使用

.attr（“d”，d3.geoPath（））；

）

这个问题中的特定文件经过预投影以适合960x600贴图，因此这是空投影的理想选择-它的设计考虑了尺寸。其单位为像素，所有坐标均在所需尺寸范围内。但是，大多数投影几何体使用以米为单位的坐标系，因此特征坐标的边界框可能有数百万个单位。在这些情况下，空投影将不起作用-它会将贴图单位值转换为像素值，而无需缩放

对于d3，空投影通常与geojson/topojson一起使用，使用d3投影预投影以适合指定的视口。有关示例，请参见（该示例使用未投影的源文件-在投影数据上使用d3投影产生的相同问题同时适用于浏览器和命令行）。预投影文件以用于空投影的主要优点是

地理身份 如果您只需要缩放要素并使其居中，则可以使用地理标识。这是一个地理变换，但使用标准投影方法，如

缩放

，

平移

，最重要的是-

fitSize

/

fitdext

。因此，我们可以将投影设置为地理标识：

var projection = d3.geoIdentity();

目前，这与上面使用的空投影相同，它从geojson几何图形中获取x，y数据，并将其显示为x，y数据，无需转换-将geojson中的每个坐标视为像素坐标。但是，我们可以将fitSize应用于此（或fitExtent），它将自动缩放数据并将其转换为指定的边界框：

var projection = d3.geoIdentity()
  .fitSize([width,height],geojsonObject);

或

请记住，大多数投影数据使用地理约定，y=0位于底部，y值随着向北移动而增加。在svg/canvas坐标空间中，y=0位于顶部，y值随着向下移动而增加。因此，我们通常需要翻转y轴：

var projection = d3.geoIdentity()
 .fitExtent([width,height],geojsonObject)
 .reflectY(true);

这个特定的数据集：是用d3投影投影的，所以它的y轴已经随着d3投影投影到svg或画布坐标空间而翻转

地理标识演示

var宽度=600；
var高度=300；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
d3.json（“https://d3js.org/us-10m.v1.json，函数（错误，美国）{
var-featureCollection=topojson.feature（us，us.objects.states）；
var projection=d3.geointity（）
.fitExtent（[[50,50]，[600-50300-50]]，featureCollection）
var path=d3.geoPath（）.projection（projection）
svg.append（“g”）
.attr（“类别”、“状态”）
.selectAll（“路径”）
.数据（featureCollection.features）
.enter（）.append（“路径”）
.attr（“填充”、“灰色”）
.attr（“d”，路径）；
});

数据无法正确投影的原因
关键问题是，您的数据已经被预测。D3地质投影使用未投影的数据，或以lat-long对进行。WGS84基准中的数据。实际上，d3地质投影采用球坐标，并将其转换为平面笛卡尔x，y坐标

您的数据与此不符-它已经是平面的。你能看得最清楚，因为阿拉斯加不是它应该在的地方（除非有人改变了阿拉斯加的拉特-长对，这是不可能的）。其他迹象和症状的已经预测的数据可能是一个功能，涵盖整个地球，并没有错误

这是一个复合投影，因此很难取消投影，但您可以在d3.js中显示已经投影的数据

“投影”已投影的数据
零投影：
最简单的是，您可以将投影定义为空：

var path = d3.geoPath(null);

这将从geojson几何图形中获取x，y数据，并将其显示为x，y数据。但是，如果x、y坐标超过svg的宽度和高度，则地图将不包含在svg中（如您在示例中使用
.attr（“d”，d3.geoPath（））；
）

这个问题中的特定文件经过预投影以适合960x600贴图，因此这是空投影的理想选择-它的设计考虑了尺寸。其单位为像素，所有坐标均在所需尺寸范围内。但是，大多数投影几何体使用以米为单位的坐标系，因此特征坐标的边界框可能有数百万个单位。在这些情况下，空投影将不起作用-它会将贴图单位值转换为像素值，而无需缩放

对于d3，空投影是c