如何解决在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 举报,一经查实,本站将立刻删除。