为了账号安全,请及时绑定邮箱和手机立即绑定

D3.js:为具有多个 geoJSON 文件的地图设置 fitExtent 或 fitSize

D3.js:为具有多个 geoJSON 文件的地图设置 fitExtent 或 fitSize

慕标琳琳 2021-06-22 17:05:37
我想绘制数据来自单个 topoJSON 文件的多个国家/地区。带有这些国家的地图应位于屏幕中间(居中),并应设置适当的比例,使地图填满整个窗口。我已经尝试过的:要获得path.bounds(d)每个国家/地区的边界框并分别使用每一侧(顶部、左侧、底部、右侧)的最大值和最小值,并提供从path.centroid(d)到的平均中心projection.center()。这没有用。应用projection.fitExtent([[x0,y0],[x1,y1]],geojsonObject)或projection.fitSize([width,height],geojsonObject)按照此解决方案中的建议。在这里,我无法按照描述创建 featureCollection 并使用它来创建地图。<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <script src="https://d3js.org/d3.v5.min.js"></script>        <script src="https://d3js.org/topojson.v2.min.js"></script>        <style type="text/css">    .svg-container {        display: inline-block;        position: relative;        width: 100%;        padding-bottom: 100%;        vertical-align: top;        overflow: hidden;    }    .svg-content {        display: inline-block;        position: absolute;        margin: 0;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);    }        </style>    </head>    <body>        <div id="container" class="svg-container"> </div>        <script type="text/javascript">                var width = 600; //for simplicity set to fixed value                var height = 600; //for simplicity set to fixed value                var projection = d3.geoMercator();                var path = d3.geoPath()                    .projection(projection);                var svg = d3.select("#container").append("svg")                      .classed("svg-content", true)                      .attr("width", width)                      .attr("height", height);我认为应该可以通过 Andrew Reid 在这篇文章中提供的建议使用fitSize或来解决这个问题fitExtent。但是我无法将其应用于我的问题。这也是我解决问题的首选方式。或者,是否可以用center()和解决这个问题scale()?我将如何确定我必须提供的坐标center()和值scale()。?非常感谢您的帮助,我尝试了几天但没有成功。
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 401 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信