当我拥有陆地的坐标信息时，如何在d3中使用topojson给海洋着色？

Question

我正在学习使用d3制作topojson地图。 我有陆地的坐标信息，并且已经成功渲染出来了。 那么，我如何给海洋（即陆地以外的区域）添加颜色呢？我尝试着给经纬网格上色，但是无法填满整个地图，留下了空白的部分。

这个可视化地图托管在http://jbk1109.github.io/上。

var projection = d3.geo.stereographic()
    .scale(245)
    .translate([width / 2, height / 2])
    .rotate([-20, 0])
    .clipAngle(180 - 1e-4)
    .clipExtent([[0, 0], [width, height]])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection)
var graticule = d3.geo.graticule();

var g = svg.append("g")

svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path)
    .style("fill","none")
    .style("stroke","#777")
    .style("stroke-width",0.2)

var land = svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path)
      .style("fill",'#cbcbcb')
      .style("opacity",0.8)

- user3562812

Answer 1

不需要计算陆地的反向（这会非常困难且计算成本高昂），只需给背景着色即可。

也就是说，您可以使用CSS：

svg {
  background: lightBlue;
}

或者你可以在地图之前添加一个填充为蓝色的

- meetamit

---

@user3562812 当然可以！那么不接受这个答案的原因是什么呢？ - meetamit

抱歉，我不知道这个功能。再次感谢。 - user3562812

Answer 2

我想补充一下：为了只给地球本身上色，您必须使用border-radius将您的svg制作成一个圆形。结果看起来非常棒：http://codeasart.com/globe/

- David Rea