Question

我正在修补一个缓慢旋转的测地球，我希望你们能帮助我做一些调整：

（代码基于：https://bl.ocks.org/mbostock/3057239）

var width = 1000,
    height = 500;

var velocity = [.002, .002],
    t0 = Date.now();

var projection = d3.geo.orthographic()
    .scale(height / 2 - 10);

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

var context = canvas.node().getContext("2d");

context.strokeStyle = "#fa0";
context.lineWidth = 0.5;

geodesic(3);

d3.timer(function() {
  var time = Date.now() - t0;
  projection.rotate([time * velocity[0], time * velocity[1]]);
  redraw();
});

function redraw() {
  context.clearRect(0, 0, width, height);

  faces.forEach(function(d) {
    d.polygon[0] = projection(d[0]);
    d.polygon[1] = projection(d[1]);
    d.polygon[2] = projection(d[2]);
  });

  context.beginPath();
  faces.forEach(function(d) {
      drawTriangle(d.polygon);
  });
  context.stroke();
}

function drawTriangle(triangle) {
  context.moveTo(triangle[0][0], triangle[0][1]);
  context.lineTo(triangle[1][0], triangle[1][1]);
  context.lineTo(triangle[2][0], triangle[2][1]);
  context.closePath();
}

function geodesic(n) {

  faces = d3.geodesic.polygons(n).map(function(d) {
    d = d.coordinates[0];
    d.polygon = d3.geom.polygon(d.map(projection));
    return d;
  });

  redraw();
}

我已经能够修改代码，使球体的设计更接近我想要的。我不确定如何进一步发展。

我的目标：

为每个顶点添加点，如下所示：https://bl.ocks.org/mbostock/3055104
为球体提供三维透视而不是平面（请查看此设计，其中有一个可让您调整透视的滑块：http://dmccooey.com/polyhedra/GeodesicIcosahedron3.html）
使笔触宽度和点大小相对于透视图发生变化（这会使整个图形看起来更加坚固，而不是每个线段具有相同的笔触宽度）
将球体移动到画布中的任意位置，并允许画布大小根据浏览器窗口的宽度而改变
在页面重新加载时随机化球体的旋转和起始位置

如果有人能帮我实现任何这些目标，我会欣喜若狂！

需要帮助使用d3.js对测地球体进行修改

0 个答案: