Javascript D3沿路径停止并重新启动过渡，以允许点击地理数据坐标
大家好，我正在尝试使用D3暂停并恢复标记沿本例所示路径的转换，并停止标记在特定数据点上的转换，如图所示。我通过单击标记开始转换，希望能够停止它，然后在单击时重新启动它–此时它暂停一段时间，然后开始 我希望能够完全停止标记，这样我就可以根据特定点击点的json数据对该点执行操作，即点击到xlink:href，然后离开页面，然后返回到标记转换，并从停止的同一点恢复转换 我想我需要将pauseValues传递到transition函数中，但我不知道怎么做 这是我的代码：Javascript D3沿路径停止并重新启动过渡，以允许点击地理数据坐标,javascript,d3.js,transition,geojson,Javascript,D3.js,Transition,Geojson,大家好，我正在尝试使用D3暂停并恢复标记沿本例所示路径的转换，并停止标记在特定数据点上的转换，如图所示。我通过单击标记开始转换，希望能够停止它，然后在单击时重新启动它–此时它暂停一段时间，然后开始 我希望能够完全停止标记，这样我就可以根据特定点击点的json数据对该点执行操作，即点击到xlink:href，然后离开页面，然后返回到标记转换，并从停止的同一点恢复转换 我想我需要将pauseValues传递到transition函数中，但我不知道怎么做 这是我的代码： <!DOCTYPE ht
<!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>
身体{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
颜色：红色；
}
圈{
填充：钢蓝；
笔画：钢蓝；
笔画宽度：3px；
}
.点{
填充：绿色；
}
.线路{
填充：无；
笔画：红色；
笔画宽度：4；
行程阵列：4px，8px；
}
可变宽度=960，
高度=500；
风险值数据=[
[610.4199794444444243.7191682432953]，//巴黎
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var持续时间=20000/数据长度，
pauseTime=2000；
var line=d3.line（）
.x（功能（d）{
回报率（d）[0]；
})
.y（功能（d）{
申报表（d）[1]；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//设置动画的路径-沿此路径的标记变换
var path=svg.append（“路径”）
.数据（[数据]）
.attr（“d”，行）
.attr（'类'，'行'）
.attr（“d”，函数（d）{
回流管（d）
});
//想要在标记暂停时激活圆圈-目的是在显示href时单击href并停止标记
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“类”、“点”）
.attr（“r”，10）
.attr（“转换”，函数（d）{
返回“translate（“+d+”）；
})
.on（'click'，函数（d，i）{
d3.选择（本）
.style（“填充”、“粉色”）
//示例-数据将针对每个点，并基于实际示例中的geojson
.附加（“a”）
.attr（“xlink:href，”http://collections.anmm.gov.au/en/objects/details/11429/")
暂停点。推（i）；
log（“pausePoints\u push\u i:+pausePoints.push（i））；
log（“pausePoints:+pausePoints”）；
if（pausePoints.length==1）
过渡（）；
});
var marker=svg.append（“圆”）
.attr（“r”，19）
.attr（“转换”、“转换”（+（数据[0]）+”）
.on（'click'，函数（d，i）{
d3.选择（本）
.style（“填充”、“粉色”）
暂停点。推（i）；
if（pausePoints.length==1）
setTimeout（函数（）{
pauseValues.lastTime=pauseValues.currentTime；
}, 100);
过渡（）；
});
var pauseValues={
上次：0，
当前时间：0
};
var pausePoints=[]，
iter=0，
transData=data.slice（）；
函数转换（）{
marker.transition（）
.ease（d3.easeLinear）
.持续时间（持续时间-（持续时间*pauseValues.lastTime））
.attrTween（“转换”，函数（）{
var p0=transData.shift（），
p1=传输数据[0]；
m=（p0[1]-p1[1]）/（p0[0]-p1[0]），
b=p0[1]-（m*p0[0]），
i=d3.插值计数（p0[0]，p1[0]）；
返回函数（t）{
//控制台日志（“T:+T”）；
var x=i（t），
y=m*x+b；
返回“translate”（“+x+”，“+y+”）；
}
})
.on（“结束”，函数（）{
如果（transData.length我帮你回答了最后一个问题。在我编写的代码中，你引入了这个变量pauseValues
，它的作用是什么？据我所知，它试图根据以前的暂停调整持续时间；你只需要在所有路径上运行一个长的转换时才需要这个变量。我的代码运行e每个分支都作为一个过渡。如果您想暂停并继续，请单击此处的一个简单重构：
身体{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
颜色：红色；
}
圈{
填充：钢蓝；
笔画：钢蓝；
笔画宽度：3px；
}
.点{
填充：绿色；
}
.线路{
填充：无；
笔画：红色；
笔画宽度：4；
行程阵列：4px，8px；
}
可变宽度=960，
高度=500；
风险值数据=[
[610.4199794444444243.7191682432953]，//巴黎
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var持续时间=20000/数据长度，
pauseTime=2000；
var line=d3.line（）
.x（功能（d）{
回报率（d）[0]；
})
.y（功能（d）{
申报表（d）[1]；
});
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
//设置动画的路径-沿此路径的标记变换
var path=svg.append（“路径”）
.数据（[数据]）
.attr（“d”，行）
.attr（'类'，'行'）
.attr（“d”，函数（d）{
回流管（d）
});
//想要在标记暂停时激活圆圈-目的是启用