我的问题很容易解释,但我在实现解决方案时遇到了真正的麻烦。我正在尝试为 D3 map 上的路径设置圆圈动画。这里的转折点是我想使用 Mike Bostock 的旋转球体之一(即 3D map )。
我想及时向地球添加其他路径并将它们用于我的动画。现在,我只想为沿着俄罗斯边界的圆圈(即沿着俄罗斯多边形坐标的路径)制作动画
我已经构建了一个 jsfiddle 来获得牵引力,您可以看到我的所有代码。不幸的是我无法让它工作,希望你能帮助我。我的 jsfiddle:http://jsfiddle.net/Guill84/xqmevpjg/7/
我认为我的主要困难是 (a) 实际上引用了俄罗斯的路径,我认为我目前没有做对,以及 (b) 确保插值计算正确(即动画是动态的)与地球相连,而不仅仅是“分层”)。执行此操作的代码如下:
setTimeout(function(){
var path = d3.select("path#Russia"),
startPoint = pathStartPoint(path);
marker.attr("r", 7)
.attr("transform", "translate(" + startPoint + ")");
transition();
//Get path start point for placing marker
function pathStartPoint(path) {
var d = path.attr("d"),
dsplitted = d.split(" ");
return dsplitted[1].split(",");
}
function transition() {
marker.transition()
.duration(7500)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);// infinite loop
}
function translateAlong(path) {
var l = path.getTotalLength();
return function(i) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";//Move marker
}
}
}
如果有任何帮助,我将不胜感激。
最佳答案
对于您问题的第一部分,选择路径的一种方法是向 id 添加一个 id :
d3.json("http://mbostock.github.io/d3/talk/20111018/world-countries.json", function(collection) {
feature = svg.selectAll("path")
.data(collection.features)
.enter().append("svg:path")
.attr("d", clip)
.attr("id", function(d) { return d.properties.name; }) ;
然后选择这样的路径:
var path = d3.select("#Russia").node()
然后你可以选择第一个点:
path.getPointAtLength(0)
查看更新后的 fiddle :http://jsfiddle.net/xqmevpjg/11/
关于javascript - D3 : Animate circle along border of country on spinning globe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37457517/