控制D3正交投影的透明度

时间:2014-07-15 12:09:10

标签: d3.js

我想在D3中使用透明地球仪并且无法弄清楚如何实现它(即移除白色表面以便可以看到地球的另一侧)。我可以为表面着色(在绘制土地后有效地变成海洋),但不能将其移除或使其透明。感谢您的帮助。

我尝试将代码(从Bostock's example改编)变成jsfiddle,但无法加载topojson。如果有人知道如何在可能的情况下使其工作,那将会很有用。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>

var width = 500,
    height = 400;

var projection = d3.geo.orthographic()
    .scale(150)
    .translate([width / 2, height / 2])
    .clipAngle(90);

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

varλ = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

varφ = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);

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

svg.on("mousemove", function () {
    var p = d3.mouse(this);
    projection.rotate([λ (p[0]), φ (p[1])]);
    svg.selectAll("path").attr("d", path);
});

d3.json("world-110m.json", function (error, world) {
    svg.append("path")
        .datum(topojson.feature(world, world.objects.land))
        .attr("class", "land")
        .attr("d", path)
        .attr("stroke", "#000")
        .attr("fill", "none");

});

</script>
</body>

2 个答案:

答案 0 :(得分:1)

默认情况下,路径的白色部分是透明的(或者说,地球的白色部分没有任何内容)。但是,地球的远端不会渲染为创建可见边形状的路径的一部分。

创建一个透明的&#39;地球,您需要做的就是在与地球可见侧相同的位置绘制地球的另一侧(使用相同的投影,但具有x维度的反转比例)。你可能还想要一些css,以使地球的另一面更轻(所以你可以区分两侧)。

答案 1 :(得分:1)

删除对您投影的clipAngle的调用,或将其传递给null而不是90,并且您应该获得透明的地球。