我一直在尝试在投影上使用 .scale().translate。但是，我无法创建正确的比例。我的似乎在网页上显示小 map 并且无法更改其大小(当我尝试更改它时，它消失了，这可能不是正确的比例......)。在照片中，您可能会在页面顶部看到一张带有我的 h1 标题的小 map 。有谁知道如何制作合适的秤？我已经坚持了很长时间，请帮忙:(
这是我的 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");
});
最佳答案
如果放大时该点消失，则可能翻译有误。
d3 投影有一个中心。标记投影中心的以度为单位的坐标。平移值是中心应投影到的坐标(以像素为单位)。
- 您没有指定中心坐标，因此对于墨卡托投影，它是默认值:[0°E,0°N]:非洲海岸外的一个点。
- 您没有显示用于翻译的坐标，但默认值为 [480,250] - 这是将重新渲染中心坐标的位置:SVG/Canvas/Container 左侧 250 像素，向下 480 像素从顶部开始。
当我们放大时，中心点仍然投影到平移点，其他一切都在移动。如果我们放大得足够远(即足够大的缩放值)，中心点以外的所有内容都将超出框架:
因此，如果在放大时您的 map 项从 map 上掉落，我们需要一个新的中心坐标。最好在您感兴趣的要素内并大致在其地理中心选择一个坐标。现在您可以尝试使用比例因子来正确显示您感兴趣的区域。
在不设置中心的情况下 - 当您将比例设置得更高时，D3 如何知道您想要关注什么？
您尚未提供功能的 geojson 或描述，因此希望以上内容足以让您获得良好的结果。但是，有一种更简单的方法。
手动设置 map 参数时，中心坐标很有用，传统上翻译值是 SVG/Canvas/Container 的中间。但是，projection.fitSize/fitExtent 将设置平移和比例值，以便感兴趣的特征自动填充指定的像素范围。
此方法不设置中心坐标 - 如有必要，它会将中心坐标平移到屏幕外，以便感兴趣的地理特征与指定的像素范围相交。这意味着平移值取决于比例，并且在使用这些拟合方法后我们无法像以前一样轻松地修改投影参数。
使用 projection.fitSize() 我们指定 SVG 的宽度和高度以及我们希望显示的 geojson 对象:projection.fitSize([width,height],feature)。 fitExtent类似但允许指定边距(D3 的文档有详细信息)，对于不同的间距选项也有一些类似的方法(再次在文档中比我在这里做的更好)。
关于javascript - 如何在 d3.js 中使用 .scale 和 .translate？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68356872/