当我有陆地坐标信息时，如何在 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)

Answer 1

没有必要（并且计算起来相当困难并且有点昂贵）来计算陆地面积的倒数。但你可以只给背景上色。

即你可以使用CSS：

svg {
  background: lightBlue;
}

<rect>或者您可以在地图后面添加一个带有蓝色填充的元素：

svg.append('rect')
  .attr('width', mapWidth)
  .attr('height', mapHeight)
  .attr('fill', 'lightBlue')