Question

我正在尝试用here中的条形创建旋转地球仪。您可以看到我的示例config。一切顺利，直到酒吧超越地平线。我不知道如何在行星的另一边从底部切割条形。有人可以建议我怎么做吗？

 /*
 * Original code source
 * http://codepen.io/teetteet/pen/Dgvfw
 */

var width = 400;
var height = 400;
var scrollSpeed = 50;
var current = 180;

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

var planetProjection = d3.geo.orthographic()
  .scale(200)
  .rotate([longitudeScale(current), 0])
  .translate([width / 2, height / 2])
  .clipAngle(90);
var barProjection = d3.geo.orthographic()
  .scale(200)
  .rotate([longitudeScale(current), 0])
  .translate([width / 2, height / 2])
  .clipAngle(90);

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

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

d3.json("https://dl.dropboxusercontent.com/s/4hp49mvf7pa2cg2/world-110m.json?dl=1", function(error, world) {
  if (error) throw error;

  var planet = svg.append("path")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land")
    .attr("d", path);

  d3.csv("https://dl.dropboxusercontent.com/s/v4kn2hrnjlgx1np/data.csv?dl=1", function(error, data) {
    if (error) throw error;

    var max = d3.max(data, function(d) {
      return parseInt(d.Value);
    })

    var lengthScale = d3.scale.linear()
      .domain([0, max])
      .range([200, 250])

      var bars = svg.selectAll(".bar")
        .data(data)
        .enter()
        .append("line")
        .attr("class", "bar")
        .attr("stroke", "red")
        .attr("stroke-width", "2");

    function bgscroll() {

      current += 1;

      planetProjection.rotate([longitudeScale(current), 0]);
      barProjection.rotate([longitudeScale(current), 0]);

      planet.attr("d", path);

      bars.attr("x1", function(d) {
         return planetProjection([d.Longitude, d.Latitude])[0];
       }).attr("y1", function(d) {
         return planetProjection([d.Longitude, d.Latitude])[1];
       }).attr("x2", function(d) {
         barProjection.scale(lengthScale(d.Value));
         return barProjection([d.Longitude, d.Latitude])[0];
       }).attr("y2", function(d) {
         barProjection.scale(lengthScale(d.Value));
         return barProjection([d.Longitude, d.Latitude])[1];
       });
    }

//    bgscroll();
     setInterval(bgscroll, scrollSpeed);  
  })
})

Answer 1

为了剪掉地平线上的条纹，我们添加一个以地球2D中心为中心并具有半径的遮罩。然后我们只在底边穿过地平线时（通过跟踪经度）才应用此遮罩。

创建遮罩

// get the center of the circle
var center = planetProjection.translate();
// edge point
var edge = planetProjection([-90, 90])
// radius
var r = Math.pow(Math.pow(center[0] - edge[0], 2) + Math.pow(center[1] - edge[1], 2), 0.5);

svg.append("defs")
    .append("clipPath")
    .append("circle")
    .attr("id", "edgeCircle")
    .attr("cx", center[0])
    .attr("cy", center[1])
    .attr("r", r)

var mask = svg.append("mask").attr("id", "edge")
mask.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "white");
mask.append("use")
    .attr("xlink:href", "#edgeCircle")
    .attr("fill", "black");

应用面具

.... bars ....
.attr("mask", function (d) {
    // make the range from 0 to 360, so that it's easier to compare
    var longitude = Number(d.Longitude) + 180;
    // +270 => -90 => the position of the left edge when the center is at 0
    // -value because a rotation to the right => left edge longitude is reducing
    // 360 because we want the range from 0 to 360
    var startLongitude = 360 - ((longitudeScale(current) + 270) % 360);
    // the right edge is start edge + 180
    var endLongitude = (startLongitude + 180) % 360;
    if ((startLongitude < endLongitude && longitude > startLongitude && longitude < endLongitude) ||
        // wrap around
        (startLongitude > endLongitude && (longitude > startLongitude || longitude < endLongitude)))
        return null;
    else
        return "url(#edge)";
});

我们也可以通过测量距离来做到这一点。

小提琴 - http://jsfiddle.net/gp3wvm8o/

Answer 2

只需跟踪可见经度的范围，如果它们不在该范围内，则隐藏它们

.attr("display", function(d) {
    // make the range from 0 to 360, so that it's easier to compare
    var longitude = Number(d.Longitude) + 180;
    // +270 => -90 => the position of the left edge when the center is at 0
    // -value because a rotation to the right => left edge longitude is reducing
    // 360 because we want the range from 0 to 360
    var startLongitude = 360 - ((longitudeScale(current) + 270) % 360);
    // the right edge is start edge + 180
    var endLongitude = (startLongitude + 180) % 360;
    if ((startLongitude < endLongitude && longitude > startLongitude && longitude < endLongitude) ||
        // wrap around
        (startLongitude > endLongitude && (longitude > startLongitude || longitude < endLongitude)))
        return "block";
    else
        return "none";
})

小提琴 - http://jsfiddle.net/b12ryhda/

Answer 3

一种适用于画布的更简单的方法是：

绘制所有条形而不剪切
绘制地图
仅绘制前景栏（即使用剪裁）

此裁剪不必手动降低，但可以利用system("aescrypt -e -p apples picture.jpg")方法，该方法应遵循path.centroid在投影上设置的裁剪。伪代码可能类似于：

clipAngle

一些条形将被绘制两次，但是随着我发现画布的速度足以与图形保持同步，并且动画至少有200多个条形才能保持平滑。

例如，请查看此code on GitHub和live page。

d3.js.旋转地球仪的酒吧

3 个答案: