How can I color ocean with topojson in d3 when I have coordinate info for land?

问题

I am learning topojson with d3. I have coordinate information for land, which is rendered correctly. Then, how can I add color to ocean (basically outside land)? I tried coloring graticule, but doesn't fill up the entire map and leaves empty spots.

The visualization is hosted on 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)

回答1:

There's no need (and it would be pretty difficult and somewhat expensive computationally) to figure out the inverse of the landmass. But you can just color the background.

I.e you can use CSS:

svg {
  background: lightBlue;
}

or you can prepend a <rect> element with a blue fill behind the map:

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

回答2:

Just want to add to this: in order to only color the globe itself you have to make your svg a circle using border-radius. The result looks great, though: http://codeasart.com/globe/

来源：https://stackoverflow.com/questions/26663982/how-can-i-color-ocean-with-topojson-in-d3-when-i-have-coordinate-info-for-land

标签

d3.js

map

topojson