D3.js d3单击圆圈暂停并恢复标记沿直线的过渡_D3.js_Svg

D3.js d3单击圆圈暂停并恢复标记沿直线的过渡

d3.js svg

D3.js d3单击圆圈暂停并恢复标记沿直线的过渡,d3.js,svg,D3.js,Svg,我想帮助更正我的代码，单击marker circle元素以暂停或恢复该元素沿直线的转换。我的代码沿着一条线移动标记，我可以使用单击按钮元素暂停并恢复此转换，但我希望能够单击标记圆本身，而不是按钮。我使用了各种参考资料，包括：我最终希望能够沿着一条地理路径设置一个标记的动画，在路径上的点上暂停并继续，然后单击这些点这是我目前的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="

我想帮助更正我的代码，单击marker circle元素以暂停或恢复该元素沿直线的转换。我的代码沿着一条线移动标记，我可以使用单击按钮元素暂停并恢复此转换，但我希望能够单击标记圆本身，而不是按钮。我使用了各种参考资料，包括：

我最终希望能够沿着一条地理路径设置一个标记的动画，在路径上的点上暂停并继续，然后单击这些点

这是我目前的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
<meta charset="utf-8">
<title>Need help</title>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

<style type="text/css">

body{
    font-family:"Helvetica Neue", Helvetica, sans-serif;
    color: red;
}
button {
  position: absolute;
  top: 15px;
  left: 10px;
  background: #004276;
  padding-right: 26px;
  border-radius: 2px;
  cursor: pointer;
}
circle {
  fill: steelblue;
  stroke: pink;
  stroke-width: 3px;
}
.point{
    fill:green;

}
.line{
  fill: none;
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 4px,8px;
}
</style>
</head>
<body>

<button>Start</button>

<script>

    var w = 960,
        h = 500;

    var duration = 10000;

    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

    var line = d3.line()
    .x(function(d){return (d)[0];})
    .y(function(d){return (d)[1];});

var data =
 [
  [480, 200],
  [580, 400],
  [680, 100],
  [780, 300],
  [180, 300],
  [280, 100],
  [380, 400]
];

//path to animate
var linepath = svg.append("path")
  .data([data])
  .attr("d", line)
    .attr('class', 'line')
    .attr("d", function(d){
        console.log(this);
        return line(d)
    });

var points = svg.selectAll("circle")
      .data(data)
        .enter()
        .append("circle")
      .attr("r", 7)
        .attr("transform", function(d) { return "translate(" + (d) + ")"; })
        .attr("class", "point");

var pauseValues = {
        lastTime: 0,
        currentTime: 0
        };
        var marker = svg.append("circle")
          .attr("r", 19)
          .attr("transform", "translate(" + (data[0]) + ")")
            .on('click', function(d,i){
                d3.select(this)
                .style("fill", "orange")
                .transition()
            });

function transition() {
  marker.transition()
        .duration(duration - (duration * pauseValues.lastTime))
        .attrTween("transform", translateAlong(linepath.node()))
        .on("end", function(){
        pauseValues = {
          lastT: 0,
          currentT: 0
        };
        transition()
      });
}

function translateAlong(path) {
  var l = path.getTotalLength();
  return function(d, i, a) {
    return function(t) {
      t += pauseValues.lastTime;
      var p = path.getPointAtLength(t * l);
      pauseValues.currentTime = t;
      return "translate(" + p.x + "," + p.y + ")";
    };
  };
}

d3.select('button').on('click',function(d,i){
  var self = d3.select(this);
  if (self.text() == "Pause"){
        self.text('Start');
        marker.transition()
      .duration(0);
        setTimeout(function(){
            pauseValues.lastTime = pauseValues.currentTime;
        }, 100);
  }else{
    self.text('Pause');
    transition();
  }
});

</script>
</body>
</html>


需要帮助吗
身体{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
颜色：红色；
}
钮扣{
位置：绝对位置；
顶部：15px；
左：10px；
背景#004276；
右边填充：26px；
边界半径：2px；
光标：指针；
}
圈{
填充：钢蓝；
笔画：粉红色；
笔画宽度：3px；
}
.点{
填充：绿色；
}
.线路{
填充：无；
笔画：红色；
笔画宽度：4；
行程阵列：4px，8px；
}
开始
var w=960，
h=500；
var持续时间=10000；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var line=d3.line（）
.x（函数（d）{return（d）[0]；}）
.y（函数（d）{return（d）[1]；}）；
var数据=
[
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
//设置动画的路径
var linepath=svg.append（“路径”）
.数据（[数据]）
.attr（“d”，行）
.attr（'类'，'行'）
.attr（“d”，函数（d）{
console.log（this）；
回流管（d）
});
var points=svg.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，7）
.attr（“transform”，函数（d）{return”translate（“+（d）+”）；}）
.attr（“类”、“点”）；
var pauseValues={
上次：0，
当前时间：0
};
var marker=svg.append（“圆”）
.attr（“r”，19）
.attr（“转换”、“转换”（+（数据[0]）+”）
.on（'click'，函数（d，i）{
d3.选择（本）
.style（“填充”、“橙色”）
.transition（）
});
函数转换（）{
marker.transition（）
.持续时间（持续时间-（持续时间*pauseValues.lastTime））
.attrween（“转换”，translateLong（linepath.node（））
.on（“结束”，函数（）{
pauseValues={
lastT:0，
电流：0
};
过渡（）
});
}
函数translateLong（路径）{
var l=path.getTotalLength（）；
返回函数（d，i，a）{
返回函数（t）{
t+=pauseValues.lastTime；
var p=path.getPointAtLength（t*l）；
pauseValues.currentTime=t；
返回“translate”（“+p.x+”，“+p.y+”）；
};
};
}
d3.选择（'按钮'）。在（'点击'）上，功能（d，i）{
var self=d3.选择（此项）；
如果（self.text（）=“暂停”）{
self.text（'Start'）；
marker.transition（）
.持续时间（0）；
setTimeout（函数（）{
pauseValues.lastTime=pauseValues.currentTime；
}, 100);
}否则{
self.text（'Pause'）；
过渡（）；
}
});

要检查圆是否在

中移动，请单击函数，使用d3.active（）
，该函数
。。。如果指定节点上没有此类活动转换，则返回null
像这样：
.on('click', function(d, i) {
    if (d3.active(this)) {
        marker.transition();
        setTimeout(function() {
            pauseValues.lastTime = pauseValues.currentTime;
        }, 100);
    } else {
        transition();
    }
});

以下是更改后的代码：


身体{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
颜色：红色；
}
钮扣{
位置：绝对位置；
顶部：15px；
左：10px；
背景#004276；
右边填充：26px；
边界半径：2px；
光标：指针；
}
圈{
填充：钢蓝；
笔画：粉红色；
笔画宽度：3px；
}
.点{
填充：绿色；
}
.线路{
填充：无；
笔画：红色；
笔画宽度：4；
行程阵列：4px，8px；
}
开始
var w=960，
h=500；
var持续时间=10000；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var line=d3.line（）
.x（功能（d）{
回报率（d）[0]；
})
.y（功能（d）{
申报表（d）[1]；
});
风险值数据=[
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
//设置动画的路径
var linepath=svg.append（“路径”）
.数据（[数据]）
.attr（“d”，行）
.attr（'类'，'行'）
.attr（“d”，函数（d）{
回流管（d）
});
var points=svg.selectAll（“圆”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“r”，7）
.attr（“转换”，函数（d）{
返回“translate（“+（d）+”）；
})
.attr（“类”、“点”）；
var pauseValues={
上次：0，
当前时间：0
};
var marker=svg.append（“圆”）
.attr（“r”，19）
.attr（“转换”、“转换”（+（数据[0]）+”）
.on（'click'，函数（d，i）{
如果（d3.激活（本））{
marker.transition（）；
setTimeout（函数（）{
pauseValues.lastTime=pauseValues.currentTime；
}, 100);
}否则{
过渡（）；
}
});
函数转换（）{
marker.transition（）
.持续时间（持续时间-（持续时间*pauseValues.lastTime））
.attrween（“转换”，translateLong（linepath.node（））
.on（“结束”，函数（）{
pauseValues={
lastT:0，
电流：0
};
过渡（）
});
}
函数translateLong（路径）{
var l=path.getTotalLength（）；
返回函数（d，i，a）{
返回函数（t）{
t+=pauseValues.lastTime；
var p=path.getPointAtLength（t*l）；
pauseValues.currentTime=t；
返回“translate”（“+p.x+”，“+p.y+”）；
};
};
}
d3。