Как я могу раскрасить океан с помощью topojson в d3, когда у меня есть информация о координатах земли?

Я изучаю топожсон с d3. У меня есть информация о координатах земли, которая отображается правильно. Тогда как я могу добавить цвет океану (в основном за пределами суши)? Я пробовал раскрашивать сетку, но не заполняет всю карту и оставляет пустые места.

Визуализация размещена на 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
person user3562812    schedule 30.10.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Нет необходимости (и это было бы довольно сложно и несколько дорого в вычислительном отношении) вычислять обратную сторону суши. Но можно просто раскрасить фон.

То есть вы можете использовать CSS:

svg {
  background: lightBlue;
}

или вы можете добавить перед картой элемент <rect> с синей заливкой:

svg.append('rect')
  .attr('width', mapWidth)
  .attr('height', mapHeight)
  .attr('fill', 'lightBlue')
person meetamit    schedule 30.10.2014
comment
@ user3562812 Конечно! Есть ли причина не принимать этот ответ тогда? - person meetamit; 31.10.2014
comment
Извините, я не знал об этой функции. Спасибо еще раз. - person user3562812; 31.10.2014

arrow_upward
0
arrow_downward

Просто хочу добавить к этому: чтобы раскрасить только сам земной шар, вам нужно сделать свой svg кругом, используя радиус границы. Однако результат выглядит великолепно: http://codeasart.com/globe/

person David Rea    schedule 02.01.2017