gpt4 book ai didi

d3.js - 在 D3.js 中缩放地理坐标

转载 作者:行者123 更新时间:2023-12-01 16:32:47 27 4
gpt4 key购买 nike

我喜欢在每个坐标上画一个圆。仅使用 widthheightcoordinates,如何缩放坐标?我是 D3.js 的新手,我想我在投影部分做错了什么。

var width = 200,
height = 200;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);

var coordinates = [ [43.08803611,-79.06312222],
[43.09453889,-79.05636667] ];

var group = svg.append('g');

var projection = d3.geo.mercator()
.translate([width,height]);

var projectedCoordinates = [];
for (var i=0; i<coordinates.length; i++) {
projectedCoordinates[i] = projection(coordinates[i]);
}

group.selectAll("circle")
.data(projectedCoordinates)
.enter()
.append("circle")
.attr("r",4)
.attr("cx", function(d){ return d[0]; })
.attr("cy", function(d){ return d[1]; });

最佳答案

您快完成了,唯一的问题是您的投影将坐标转换到您的绘图区域之外。您可以使用 .center() 函数告诉投影中心在哪里,并使用 .scale() 来“放大”。您还应该只将投影平移容器宽度和高度的一半,否则中心将位于右下角。

以下示例值应该能让您看到要点:

var projection = d3.geo.mercator()
.center([43.09, -79.06])
.scale(50000)
.translate([width/2,height/2]);

关于d3.js - 在 D3.js 中缩放地理坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16468854/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com