在D3中为刻度生成topojson几何

问题描述

我想生成一个球体，其中每个小面都由不同的颜色组成，非常类似于此图像：

现在在D3中，我添加了一个刻度，并且我已经稍微接近参考球了：

var width = 960,height = 500;

var proj = d3.geoOrthographic()
    .scale(230)
    .translate([width / 2,height / 2])
// change this to 180 for transparent globe
    .clipAngle(90);


var path = d3.geoPath().projection(proj).poinTradius(1.5);

var graticule = d3.geoGraticule()
  .extent([[-180,-80.000001],[180,80.000001]])
  .step([40,10])
  
//console.log(graticule.extent());

  
var time = Date.Now();
var rotate = [90,-45];
var veLocity = [.015,-0];
  
var linetoLondon = function(d) {
  return path({"type": "Linestring","coordinates": [london,d.geometry.coordinates]});
}

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

svg.call(d3.drag()
        .on("start",dragstarted)
        .on("drag",dragged));

//queue()
//    .defer(d3.json,"world-110m.json")
//    .defer(d3.json,"destinations.json")
//    .await(ready);

function ready() {
    svg.append("circle")
        .attr("cx",width / 2)
        .attr("cy",height / 2)
        .attr("r",proj.scale())
        .attr("class","noclicks")
        .attr("fill","none");

    svg.append("path")
        .datum(graticule)
        .attr("class","graticule noclicks")
        .attr("d",path);

    refresh();
    spin();
}


function refresh() {
  svg.selectAll(".graticule").attr("d",path);
  svg.selectAll(".point").attr("d",path);
  svg.selectAll(".lines").attr("d",(d) => { if (d) { return linetoLondon(d); }});
}

  
var timer;
  
function spin() {
  timer = d3.timer(function() {
    var dt = Date.Now() -time;
    
    proj.rotate([rotate[0] + veLocity[0] * dt,rotate[1] + veLocity[1] * dt]);
    
    refresh();
  });
}
  
function dragstarted() {
  timer.stop();
  v0 = versor.cartesian(proj.invert(d3.mouse(this)));
  r0 = proj.rotate();
  q0 = versor(r0);
}
  
function dragged() {
  var v1 = versor.cartesian(proj.rotate(r0).invert(d3.mouse(this))),q1 = versor.multiply(q0,versor.delta(v0,v1)),r1 = versor.rotation(q1);
  proj.rotate(r1);
  refresh();
}

ready();

.land {
  fill: white;
  opacity: .5;
  stroke: #4f2291;
  stroke-opacity: 1;
}

.countries path {
  stroke: #4f2291;  
  stroke-linejoin: round;
  stroke-width:.5;
  fill: #4f2291;
  opacity: .1;
  pointer-events:none;
}
  
.lines path {
  fill: none;
  stroke: #4f2291;
  stroke-opacity: 0.3;
  stroke-dasharray: 5,5; 
}
  
circle {
  stroke: #4f2291;
}
  
.graticule {
  fill: none;
  stroke: #4f2291;
  stroke-width:.5;
  opacity:.2;
}

.labels {
  font: 8px sans-serif;
  fill: black;
  opacity: 1;
  cursor: pointer;
}

.noclicks {
  pointer-events:none;
}

.point {
  opacity:.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

据我了解，我需要创建一个topojson描述每个方面的特征（每个角的颜色和坐标）。

有人可以让我开始执行该任务的地方吗？我尝试阅读topojson的文档，但在这里迷路了。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）