Создайте изогнутую границу вокруг проекции карты d3 - PullRequest
Новая
       8

Создайте изогнутую границу вокруг проекции карты d3

0 голосов
/ 25 февраля 2019

Я создал карту мира в d3, используя geoNaturalEarth1 (), показанный здесь .Я использовал карту геозон мира с этой проекцией, чтобы получить карту, как показано в коде ниже.Тем не менее, это показывает, что страны плавают в космосе без границ.Я хотел бы нарисовать границу вокруг проекции карты, чтобы она выглядела как карта.Граница будет плоской верхней / нижней, изогнутыми сторонами, как показано на проекционном изображении.Возможно ли это, и как я могу это сделать? 

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');

1 Ответ

0 голосов
/ 25 февраля 2019

Вы можете предоставить geojson тип Sphere для генератора пути:

Также поддерживается тип Sphere, который полезен для рендеринга контура земного шара;сфера не имеет координат.( документы )

Это выглядит следующим образом: 

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>
...