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

【问题标题】：How can I color ocean with topojson in d3 when I have coordinate info for land?当我有陆地坐标信息时，如何在 d3 中使用 topojson 为海洋着色？
【发布时间】：2014-10-30 21:52:26
【问题描述】：

我正在用 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)

【问题讨论】：

标签： d3.js map topojson

【解决方案1】：

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

即你可以使用 CSS：

svg {
  background: lightBlue;
}

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

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

【讨论】：

@user3562812 当然！那么有理由不接受这个答案吗？
抱歉，我不知道这个功能。再次感谢。

【解决方案2】：

只是想补充一点：为了只为地球本身着色，您必须使用边框半径使您的 svg 成为一个圆圈。不过，结果看起来很棒：http://codeasart.com/globe/

【讨论】：