小编zel*_*niy的帖子

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

 /*
 * 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, …

我做了一个我要实现的小例子，这里是-https://jsfiddle.net/zeleniy/4sgqgcx0/。您可以照常缩放和平移SVG图像。但是我不知道当用户单击“ +”和“-”按钮时如何以编程方式实现缩放。特别是当他已经放大/缩小和平移原始图像时。你可以帮帮我吗？

在代码的第13行，您将找到zoom事件处理程序。

var zoom = d3.zoom()
    .on('zoom', function() {
        canvas.attr('transform', d3.event.transform);
    });

在第35和39行-缩放事件处理程序

d3.select('#zoom-in').on('click', function() {
    // what here?
});

d3.select('#zoom-out').on('click', function() {
    // what here?
});

因此，当用户单击“ +”时，应用程序应该放大，就像鼠标位于SVG元素的中心一样。与“-”相同。

请参阅我在jsfiddle上的示例。一种红色rect作为静态降价存在。第二个绿色rect是使用附加方法附加的。蓝色在哪里rect？您可以使用任何文档检查器看到蓝色rect已插入svg元素中，但它不可见。为什么？我尝试使用 SVG 插入大量矩形documentFragment，但它们都不可见......