我已经创建了一个问题块 http://bl.ocks.org/Mbrownshoes/5e36771400038b0c861c6617c622c5f7
我希望箭头在移动时沿路径生动。目前我正在使用.attr（＆＃34; marker-end＆＃34; ..）添加箭头但不出所料，它将箭头添加到结束位置，而不是移动结束位置。有一些示例将单个箭头移动一条长的单一路径（http://bl.ocks.org/dem42/e10e933990ee662c9cbd）但是如何让所有这些箭头沿着所有这些路径移动？
route_path = g.selectAll(".route")
// .data(migration.filter(function(d) {
// return d.Province != 'International';
// }))
.data(migration)
.enter()
.append("path")
.attr("class", "route")
.attr('d', function(d, i) {
line_data.forEach(function(j) {
// console.log(ii)
if (j.prov.PRENAME == d.Province) {
d.coords = j.coords
}
if (d.Province == 'International') {
d.coords = [-139.75635246400601, 53.75809690349844]
}
})
// console.log(d)
d.net = Number(d.Origin) - Number(d.Destination)
// define the location for arrow to start/end in bc here
bc_coords = [-122.75635246400601, 54.75809690349844];
if (d.Province == 'Nunavut') {
bc_coords = [-122.75635246400601, 57.75809690349844]
} else if (d.Province == 'Alberta') {
bc_coords = [-121.245605, 52.263570]
} else if (d.Province == 'Yukon') {
bc_coords = [-130.417969, 59.562099]
} else if (d.Province == 'Saskatchewan') {
bc_coords = [-121.394922, 53.469826]
} else if (d.Province == 'Manitoba') {
bc_coords = [-121.146484, 54.262016]
} else if (d.Province == 'Northwest Territories') {
bc_coords = [-122.167969, 59.462099]
} else if (d.Province == 'Newfoundland and Labrador') {
bc_coords = [-122.146484, 56.386543]
} else if (d.Province == 'International') {
bc_coords = [-138.346484, 53.76543]
} else if (d.Province == 'Quebec') {
bc_coords = [-122.046484, 55.586543]
}
if (d.net < 0) {
return path({
type: "LineString",
coordinates: [
bc_coords,
// [-122.75635246400601, 54.75809690349844], // BC
d.coords
]
})
// }
} else {
// if (d.Province == 'Alberta') {
return path({
type: "LineString",
coordinates: [
d.coords, bc_coords // BC
]
})
// }
}
})
// .style("stroke-dasharray", ("5, 3"))
.attr("stroke", function(d, i) {
// console.log(d.Destination)
if (Number(d.Origin) - Number(d.Destination) > 0) {
return "#3f51b5";
} else {
return "#D32F2F";
}
})
.style("stroke-width", function(d) {
// console.log(Math.abs((Number(d.Origin) - Number(d.Destination))))
return line_size(Math.abs((Number(d.Origin) - Number(d.Destination))));
})
.style("opacity", .8)
.transition()
.duration(2000)
.attrTween("stroke-dasharray", function() {
var len = this.getTotalLength();
return function(t) {
return (d3.interpolateString("0," + len, len + ",0"))(t)
};
}).attr("marker-end", function(d) {
// console.log(d)
if (d.net > 0) {
return "url(#end-arrow)"
} else {
return "url(#end-arrow-neg)"
}
})