Javascript d3.js地理分划未正确显示

所以我想把一张d3.js卫星投影图放在一起，但我遇到了一些奇怪的事情。第一个问题是，我的卫星投影背面的分划在我不想显示的时候显示出来

即使我的分划上有一个填充集，填充不透明度=1，你仍然可以看到它们。这是它的样子

下面是它的屏幕截图。正如你所看到的，另一个问题是，出于某种原因，我的分划中的一些步骤根本没有填满：

下面是js代码（试图让事情尽可能简单明了）：

另一个问题是当我尝试将一些geojson数据投影到地图上时会发生什么。当我的分划上的填充设置为灰色时，它会覆盖地图，看起来像上面的屏幕截图。你看不到，但这块陆地实际上隐藏在上面灰色的填充物后面

然而，当我将分划上的填充设置为“无”时，您可以开始看到geojson数据的轮廓，但它显示得很奇怪。下面是我的geojson没有填充时的样子：

以下是geojson数据的外观：

我基本上是在尝试填充轮廓中的所有内容，并将其显示在填充的分划上，分划不显示投影的背面。有人知道我如何解决这些问题吗

<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>

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