我使用所示的 geoNaturalEarth1() 在 d3 中创建了一个世界地图 here .我使用带有此投影的 geojson 世界地图来获取 map ,如下面的代码所示。然而,这显示了漂浮在没有边界的太空中的国家。我想在 map 投影周围画一个边框,这样它看起来更像一张 map 。边界将是平坦的顶部/底部,弯曲的侧面,如投影图像所示。这可能吗?我该怎么做?
var projection = d3.geoNaturalEarth1()
.translate([w/2, h/2])
.scale(247)
.center([0,0]);
var path = d3.geoPath().projection(projection);
d3.json('map.geojson').then(function(world) {
svg.selectAll(".emissions_path")
.data(world.features)
.enter().append("path")
.attr('fill', '#fff')
.attr("d", path)
.style('stroke', 'black')
.style('stroke-width', '0.5px');
最佳答案
您可以向路径生成器提供 Sphere
类型的 geojson:
The type Sphere is also supported, which is useful for rendering the outline of the globe; a sphere has no coordinates. (docs)
这看起来像:
var outline = {type:"Sphere"}
并且可以直接传递给路径生成器:
var context = d3.select("canvas").node().getContext("2d"),
projection = d3.geoNaturalEarth1()
.scale(70)
.translate([200,100])
path = d3.geoPath()
.context(context)
.projection(projection);
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
if (error) throw error;
context.beginPath();
context.fillStyle = "lightgreen";
path(topojson.feature(world, world.objects.land));
context.fill();
context.beginPath();
context.strokeStyle = "#ccc";
path({type: "Sphere"})
context.stroke();
});
<canvas width="500" height="300"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
顺便说一句,还有 d3.geoGraticule ,它允许以固定间隔绘制经线和平行线:
var context = d3.select("canvas").node().getContext("2d"),
projection = d3.geoNaturalEarth1()
.scale(70)
.translate([200,100])
path = d3.geoPath()
.context(context)
.projection(projection);
d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function(error, world) {
if (error) throw error;
context.beginPath();
context.fillStyle = "lightgreen";
path(topojson.feature(world, world.objects.land));
context.fill();
context.beginPath();
context.strokeStyle = "#eee";
path(d3.geoGraticule10())
context.stroke();
context.beginPath();
context.strokeStyle = "#000";
path({type:"Sphere"})
context.stroke();
});
<canvas width="500" height="300"></canvas>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
关于javascript - 在 d3 map 投影周围创建一个弯曲的边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54856638/