0
안녕하세요. D3을 사용하여이 예와 같은 경로로 마커 전환을 다시 시작하려고합니다. D3 tween - pause and resume controls 더하기 특정 마커 전환을 중지하십시오. 데이터 포인트는 D3 transition along segments of path and pause at coordinate values입니다. 마커를 클릭하여 전환을 시작하고 마커를 클릭 한 다음 다시 시작하면 마침표가 잠시 멈추고 다시 시작할 수 있습니다.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>
예는, 대단히 감사합니다 지금은 조금 더 나은 무슨 일이 일어나고 있는지 이해하고 당신이 쓴 것은 나에게 많은 도움이 : 일시 정지 및 클릭에 다시 시작하려는 경우 여기 간단한 리팩토링이다 . 포인트의 전환을 시작 및 중지하고 지금 수행 할 수있는 마커를 클릭하여 포인트를 다시 시작할 수 있기를 원했습니다. 귀하의 코드를 약간 변경하여 "pausePoints.push (i);" 클릭 마커 기능을 사용하면 원하는 결과를 얻을 수 있습니다. 다시 한 번 감사드립니다! – user3471259