d3.js - 当我有陆地坐标信息时，如何在 d3 中使用 topojson 为海洋着色？

Question

我正在用 d3 学习 topojson。
我有正确呈现的土地坐标信息。
那么，如何为海洋(基本上在陆地之外)添加颜色？我尝试为刻度着色，但没有填满整个 map 并留下空白点。

可视化托管于 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> map 后面带有蓝色填充的元素:

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