d3.js geo graticules无法正确显示

时间:2016-08-16 17:15:29

标签: javascript d3.js geojson d3.geo

所以我试图整理一张d3.js卫星投影地图,但我发生了一些奇怪的事情。第一个问题是我的卫星投影背面的刻度显示在我不想要的时候。

即使我的刻度与填充不透明度= 1有填充,你仍然可以看到它们。这是它的样子。

这是一张截图。正如你可以看到的另一个问题是,出于某种原因,我的刻度中的一些步骤根本就没有填充:

enter image description here

这里是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没有填充的样子:

enter image description here

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

我基本上试图填充大纲中的所有内容,并将其显示在不显示投影背面的填充刻度上。是否有人知道如何解决这些问题?

0 个答案:

没有答案