D3.js 控制D3正交投影的透明度_D3.js

D3.js 控制D3正交投影的透明度

d3.js

D3.js 控制D3正交投影的透明度,d3.js,D3.js,我想在D3中使用一个透明的球体，但不知道如何实现它，即去除白色表面以便可以看到球体的另一面。我可以在陆地被画出来后给表面涂上颜色，但不能将其去除或使其透明。谢谢你的帮助我试图将代码改编成一个，但无法加载topojson。如果有人知道如何在可能的情况下工作，这将是有用的 <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="http://d3js.org/d3.v3.min.js">&

我想在D3中使用一个透明的球体，但不知道如何实现它，即去除白色表面以便可以看到球体的另一面。我可以在陆地被画出来后给表面涂上颜色，但不能将其去除或使其透明。谢谢你的帮助

我试图将代码改编成一个，但无法加载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>

默认情况下，路径的白色部分是透明的，或者更确切地说，在地球的白色部分中没有任何内容。但是，地球的远侧不会作为创建可见侧形状的路径的一部分进行渲染

要创建一个“透明”的球体，您需要做的就是使用相同的投影绘制球体的另一侧，但在球体的可见一侧的同一点上使用x维度的反向比例。除了使地球的另一侧更轻之外，您可能还需要一些css，以便能够区分两侧。

删除投影上对的调用，或者将其传递为null而不是90，您应该得到一个透明的地球。

谢谢ckersch，但是远端的功能不应该变小吗？当然，这种方法会将它们放大，就好像它们更接近视点一样。这取决于投影的距离。d3正交投影是从无限远的距离投影的，因此显示完整的半球体，而不改变透视图的大小。如果你想要一个非无限的投影距离，你必须做一个新的投影，再加上地球背面的一个新投影。在我的例子中，我有一个透明的地球，但不想要一个。。。添加clipAngle90成功了。