D3沿路徑停止並重新啟動過渡，以允許單擊進入地理數據坐標
[英]D3 stop and restart transition along path to allow click through to geo data coordinates
問題描述
嗨，我正在嘗試使用D3沿此示例D3補間動畫沿路徑暫停和恢復標記的過渡-暫停和恢復控件以及在特定數據點上停止該標記的過渡，例如沿路徑和暫停段的D3過渡以坐標值 。 我通過單擊標記來開始轉換，並且希望能夠停止它，然后在單擊它時重新啟動它-此時它會暫停一段時間然后再啟動。
我希望能夠完全停止標記，因此我可以對標記點進行操作，即根據其json數據單擊特定鏈接的點的xlink：href，然后離開頁面-然后返回標記轉換並從停止的同一點恢復過渡。
我想我需要將pauseValues傳遞到轉換函數中，但是不知道如何執行此操作。
這是我的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: red;
}
circle {
fill: steelblue;
stroke: steelblue;
stroke-width: 3px;
}
.point {
fill: green;
}
.line {
fill: none;
stroke: red;
stroke-width: 4;
stroke-dasharray: 4px, 8px;
}
</style>
<body>
<script>
var width = 960,
height = 500;
var data = [
[610.4199794444444, 243.7191682432953], //Paris
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var duration = 20000/data.length,
pauseTime = 2000;
var line = d3.line()
.x(function(d) {
return (d)[0];
})
.y(function(d) {
return (d)[1];
});
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//path to animate - marker transitions along this path
var path = svg.append("path")
.data([data])
.attr("d", line)
.attr('class', 'line')
.attr("d", function(d) {
return line(d)
});
//Want to activate circles when marker paused on them - intention is to have on click to href and stop marker while href is displayed
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("class", "point")
.attr("r", 10)
.attr("transform", function(d) {
return "translate(" + d + ")";
})
.on('click', function(d, i) {
d3.select(this)
.style("fill", "pink")
//sample - data will be for each point and based on the geojson in real example
.append("a")
.attr("xlink:href", "http://collections.anmm.gov.au/en/objects/details/11429/")
pausePoints.push(i);
console.log("pausePoints_push_i: " +pausePoints.push(i));
console.log("pausePoints: " + pausePoints);
if (pausePoints.length === 1)
transition();
});
var marker = svg.append("circle")
.attr("r", 19)
.attr("transform", "translate(" + (data[0]) + ")")
.on('click', function(d, i) {
d3.select(this)
.style("fill", "pink")
pausePoints.push(i);
if (pausePoints.length === 1)
setTimeout(function() {
pauseValues.lastTime = pauseValues.currentTime;
}, 100);
transition();
});
var pauseValues = {
lastTime: 0,
currentTime: 0
};
var pausePoints = [],
iter = 0,
transData = data.slice();
function transition() {
marker.transition()
.ease(d3.easeLinear)
.duration(duration - (duration * pauseValues.lastTime))
.attrTween("transform", function(){
var p0 = transData.shift(),
p1 = transData[0];
m = (p0[1] - p1[1]) / (p0[0] - p1[0]),
b = p0[1] - (m * p0[0]),
i = d3.interpolateNumber(p0[0], p1[0]);
return function(t){
//console.log("T: " +t);
var x = i(t),
y = m*x + b;
return "translate(" + x + "," + y + ")";
}
})
.on("end", function(){
if (transData.length <= 1) return;
iter++;
setTimeout(transition, pausePoints.indexOf(iter) !== -1 ? pauseTime : 0);
});
};
</script>
</body>
1 個解決方案
解決方案1
1 已采納 2017-12-02 16:06:04
我為您解決了最后一個問題。 從我編寫的代碼中，您引入了此變量pauseValues ，它打算做什么？ 據我所知，它嘗試根據先前的暫停來調整持續時間； 僅當您在所有路徑上進行長時間過渡時，才需要此功能。 我的代碼將每個分支作為一個過渡運行。 如果您想暫停並繼續點擊，這里有一個簡單的重構方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> body { font-family: "Helvetica Neue", Helvetica, sans-serif; color: red; } circle { fill: steelblue; stroke: steelblue; stroke-width: 3px; } .point { fill: green; } .line { fill: none; stroke: red; stroke-width: 4; stroke-dasharray: 4px, 8px; } </style> <body> <script> var width = 960, height = 500; var data = [ [610.4199794444444, 243.7191682432953], //Paris [480, 200], [580, 400], [680, 100], [780, 300], [180, 300], [280, 100], [380, 400] ]; var duration = 20000 / data.length, pauseTime = 2000; var line = d3.line() .x(function(d) { return (d)[0]; }) .y(function(d) { return (d)[1]; }); var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //path to animate - marker transitions along this path var path = svg.append("path") .data([data]) .attr("d", line) .attr('class', 'line') .attr("d", function(d) { return line(d) }); //Want to activate circles when marker paused on them - intention is to have on click to href and stop marker while href is displayed svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("class", "point") .attr("r", 10) .attr("transform", function(d) { return "translate(" + d + ")"; }) .on('click', function(d, i) { d3.select(this) .style("fill", "pink") //sample - data will be for each point and based on the geojson in real example .append("a") .attr("xlink:href", "http://collections.anmm.gov.au/en/objects/details/11429/") pausePoints.push(i); if (pausePoints.length === 1) transition(); }); var marker = svg.append("circle") .attr("r", 19) .attr("transform", "translate(" + (data[0]) + ")") .on('click', function(d, i) { transition(); }); var pausePoints = [], iter = 0; transData = data.slice(); function transition() { marker.transition() .ease(d3.easeLinear) .duration(duration) .attrTween("transform", function() { var p0 = transData.shift(), p1 = transData[0], m = (p0[1] - p1[1]) / (p0[0] - p1[0]), b = p0[1] - (m * p0[0]), interp = d3.interpolateNumber(p0[0], p1[0]); return function(t) { var x = interp(t), y = m * x + b; return "translate(" + x + "," + y + ")"; } }) .on("end", function() { iter++; if ( transData.length <= 1 || // out of points pausePoints.indexOf(iter) !== -1) // on a clicked point { return; } transition(); }); }; </script> </body>
d3 geo.path過渡
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.