2

So I'm trying to put together a d3.js satellite projection map but I am having a couple of weird things happening. The first issue is that the graticules on the backside of my satellite projection are displaying when I don't want them to.

Even when I have a fill set on my graticules with fill-opacity = 1, you can still see them. Here's what it looks like.

Here's a screenshot of what it looks like. As you can see another issue is that, for some reason, some of the steps in my graticules aren't filling at all:

enter image description here

And here's the js code (tried to make things as straightforward as possible):

<script>

    var width = 1190,
        height = 1700;   

    var projection = d3.geo.satellite()
        .distance(3)
        .scale(1300)
        .rotate([85,-30,15])
        .center([-25, 35]);

    var graticule = d3.geo.graticule()
        .step([5, 5]);

    var path = d3.geo.path()
        .projection(projection);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var landMass = svg.append( "g" );

    svg.append("path")
        .datum(graticule)
        .attr("class", "graticule")
        .attr("d", path);

    landMass.selectAll( "path" )
          .data( us_json.features )
          .enter()
          .append( "path" )
          .attr( "fill", "white" )
          .attr( "d", path );

</script>

(us_json is the variable name I have to my geojson data object)

And here's my css:

.graticule { fill:gray; stroke: white; stroke-width: 1px; fill-opacity: 1;}

The other issue is what happens when I try to project some geojson data onto my map. When I have a fill set to gray on my graticules, it covers up the map and looks like the screenshot above. You can't see it, but the landmass is actually hiding behind that gray fill above.

When I have the fill on my graticules set to none however, you can start to see the outline of my geojson data, but it's displaying weirdly. Here's what it looks like with no fill on my geojson:

enter image description here

Here's what the geojson data is supposed to look like: http://bl.ocks.org/d/fd82889eeb55d18b3c1db3d6692ed525

I'm essentially trying to fill everything in the outline and have that displayed over the filled graticules that don't show the backside of the projection.Does anyone have an idea of how I could solve these issues?

0 Answers0