如何使用d3.js沿着GeoJSON路徑動畫一個對象？

我正在使用D3.js從GeoJSON文件生成並呈現路徑。這很好，但現在我想沿着這條路徑製作一個物體。我知道那是用D3和標準SVG做：如何使用d3.js沿着GeoJSON路徑動畫一個對象？

創建一個過渡，並設置其持續時間
在過渡的每一幀，使用％完成找到沿路徑
移動座標將對象與步驟2中找到的座標聯繫起來

很簡單。但是我遇到的問題是d3.geo.path（）似乎沒有像標準D3路徑對象（例如有用的getPointAtLength（）方法）那樣返回任何長度或位置數據。所以我無法找到一個點的x，y座標，例如沿路徑的25％。

有沒有辦法獲得這些數據？（或者是否有更好的方法，例如將d3.geo.path（）轉換爲常規的D3路徑？）

下面是我的代碼的截斷版本;一個活生生的例子是在這裏：http://jsfiddle.net/5m35J/4/

json = { 
    ... // snipped for brevity 
}; 

// Draw a GeoJSON line on the map: 

map = $('#map'); 
xy = d3.geo.mercator().scale(480000).translate([630700, 401100]); 
path = d3.geo.path().projection(xy); 

vis = d3.select("#map") 
    .append("svg:svg") 
    .attr("width", 960) 
    .attr("height", 600); 

vis.append("svg:g") 
    .attr("class", "route") 
    .selectAll("path") 
    .data(json.features) 
    .enter() 
    .append("svg:path") 
    .attr("d", path) 
    .attr("fill-opacity", 0.5) 
    .attr("fill", "#fff") 
    .attr("stroke", "#333"); 

// Draw a red circle on the map: 

//len = 100; // how do I find the length of the path? 
origin_x = 100; 
origin_y = 100; 

group = vis.append("svg:g"); 

circle = group.append("circle") 
    .attr({ 
    r: 10, 
    fill: '#f33', 
    transform: function() { 
     //var p = path.getPointAtLength(0) 
     //return "translate(" + [p.x, p.y] + ")"; 
     return "translate("+ origin_x +","+ origin_y +")"; 
    } 
}); 

// Animate the circle: 

duration = 5000; 
circle.transition() 
    .duration(duration) 
    .ease("linear") 
    .attrTween("transform", function (d, i) { 
    return function (t) { 
     //var p = path.node().getPointAtLength(len*t) // d3.geo.path() doesn't provide a getPointAtLength() method! 
     //return "translate("+[p.x,p.y]+")" 
     var current_x = origin_x + origin_x * t; 
     var current_y = origin_y + origin_y * t;    
     return "translate("+ current_x +","+ current_y +")"; 
    } 
});

來源

2013-07-22 Zac

好吧，我想通了，但我不能完全肯定，如果我的解決辦法是「正確」的方式做到這一點。基本上，我使用D3來選擇由d3.geo.path（）對象創建的原始SVG元素。

注意更改targetPath，pathNode和pathLength變量，並且也給transform()和attrTween()功能：

// Draw a red circle on the map: 

group = vis.append("svg:g"); 

var targetPath = d3.selectAll('.route')[0][0], 
    pathNode = d3.select(targetPath).selectAll('path').node(), 
    pathLength = pathNode.getTotalLength(); 

circle = group.append("circle") 
    .attr({ 
    r: 10, 
    fill: '#f33', 
    transform: function() { 
     var p = pathNode.getPointAtLength(0) 
     return "translate(" + [p.x, p.y] + ")"; 
    } 
}); 

// Animate the circle: 

duration = 10000; 
circle.transition() 
    .duration(duration) 
    .ease("linear") 
    .attrTween("transform", function (d, i) { 
    return function (t) { 
     var p = pathNode.getPointAtLength(pathLength*t); 
     return "translate(" + [p.x, p.y] + ")"; 
    } 
});

活生生的例子是在這裏：http://jsfiddle.net/5m35J/6/

來源

2013-07-22 18:52:25 Zac

如何使用d3.js沿着GeoJSON路徑動畫一個對象？

回答

相關問題