所以我试图整理一张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
我基本上试图填充大纲中的所有内容,并将其显示在不显示投影背面的填充刻度上。是否有人知道如何解决这些问题?