如何在 d3.js 中使用 .scale 和 .translate？答案

【问题标题】：how to use .scale and .translate with d3.js?如何在 d3.js 中使用 .scale 和 .translate？
【发布时间】：2021-07-13 05:21:17
【问题描述】：

我一直在尝试使用 .scale().translate 进行投影。但是，我无法创建正确的比例。我的似乎在网页上显示了小地图并且无法更改其大小（当我尝试更改它时，它消失了，这可能不是正确的比例......）。在照片中，您可能会在页面顶部看到一张带有我的 h1 标题的小地图。有谁知道如何制作正确的比例？我已经卡在这很长时间了，请帮助:(

这是我的 HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./dist/main.css" />
    <script src="./dist/main.js"></script>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
    <script src="https://d3js.org/topojson.v2.min.js"></script>
    <script src="neighborhood.js"></script>
    <title>Project Name</title>
</head>

<body>
    <h1>House Price in the Bay Area</h1>
    <svg id="my_dataviz" width="400" height="300"></svg>
    <script src="index.js"></script>
    <script src="neighborhood.js"></script>
</body>

</html>

这是我的 .js 文件

var canvas = d3.select("body").append("svg")
    .attr("width", 900)
    .attr("height", 600)

d3.json("Bay_Area_Counties.geojson", function (data) {
    var group = canvas.selectAll("g")
        .data(data.features)
        .enter()
        .append("g")

    var projection = d3.geoMercator().**scale().translate([])**;
    var path = d3.geoPath(projection);

    var areas = group.append("path")
        .attr("d", path)[![ ][1]][1]
        .attr("class", "area")
        .attr("fill", "steelblue");
});

【问题讨论】：

标签： javascript html d3.js

【解决方案1】：

如果放大时该点消失，则可能是翻译错误。

d3 投影有一个中心。以度为单位的坐标，用于标记投影的中心。平移值是中心应投影到的像素坐标。

您没有指定中心坐标，因此对于墨卡托投影，它是默认值：[0°E,0°N]：非洲海岸外的一个点。
您没有显示用于翻译的坐标，但默认值为 [480,250] - 这是将渲染中心坐标的位置：距 SVG/Canvas/Container 左侧 250 像素，向下 480 像素从顶部开始。

当我们放大中心点时，中心点仍然投影到平移点，其他一切都在移动。如果我们放大得足够远（即把比例值增大到足够大），除了中心点之外的所有东西都会超出框架：

因此，如果在放大地图时您的地图项掉线，我们需要一个新的中心坐标。最好在您感兴趣的要素中选择一个坐标，并大致在其地理中心。现在您可以使用比例因子来正确显示您感兴趣的区域。

如果不设置中心 - 当您将比例设置得更高时，D3 如何知道您想要关注的内容？

您还没有提供有关您的功能或描述的 geojson，因此希望以上内容足以让您获得良好的结果。但是，有一种更简单的方法。

当手动设置地图参数时，中心坐标很有用，传统上平移值是 SVG/Canvas/Container 的中间。但是，projection.fitSize/fitExtent 将设置平移和缩放值，以便感兴趣的特征会自动填充指定的像素范围。

此方法不设置中心坐标 - 如有必要，它会将中心坐标平移到屏幕外，以便感兴趣的地理特征与指定的像素范围相交。这意味着平移值取决于比例，使用这些拟合方法后，我们无法像以前那样轻松地修改投影参数。

使用 projection.fitSize() 我们指定 SVG 的宽度和高度以及我们希望显示的 geojson object：projection.fitSize([width,height],feature)。 fitExtent 类似，但允许指定边距（D3 的文档有详细信息），对于不同的间距选项也有一些类似的方法（再次在文档中介绍，比我在这里做的更好）。

【讨论】：