2

因此，我正在尝试制作 d3.js 卫星投影图，但发生了一些奇怪的事情。第一个问题是，当我不希望它们显示时，我的卫星投影背面的标线正在显示。

即使我在刻度上设置了填充不透明度 = 1，您仍然可以看到它们。这是它的样子。

这是它的外观截图。如您所见，另一个问题是，由于某种原因，我的刻度中的某些步骤根本没有填充：

在此处输入图像描述

这是 js 代码（试图使事情尽可能简单）：

<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 是我的 geojson 数据对象的变量名）

这是我的CSS：

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

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

但是，当我将刻度上的填充设置为无时，您可以开始看到我的 geojson 数据的轮廓，但它的显示很奇怪。这是我的geojson上没有填充的样子：

在此处输入图像描述

这是 geojson 数据的样子：http ://bl.ocks.org/d/fd82889eeb55d18b3c1db3d6692ed525

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

4

0 回答 0