我正在使用d3和javascript构建一个可旋转的财富之轮。我有一个样本,我到目前为止在一个plunkr。现在我可以沿着鼠标拖动滚轮。我也有一个随机的spin()函数。
http://plnkr.co/edit/SXSsiWDoUGjHVj98HF5F?p=preview
以下是代码片段,它与滚轮的旋转和鼠标拖动有关:
function spin(d){
var ps = 360/data.length,
pieslice = Math.round(1440/data.length),
rng = Math.floor((Math.random() * 1440) + 360);
rotation = (Math.round(rng / ps) * ps);
//TODO: click rightmost slice
picked = 0;
console.log(picked+1);
rotation += 90 - Math.round(ps/2);
vis.transition()
.duration(3000)
.attrTween("transform", rotTween)
.each("end", function(){
// //mark question as seen
// d3.select(".slice:nth-child(" + (picked + 1) + ") path")
// .attr("fill", "#111");
//populate question TODO
d3.select("#question h1")
.text(data[picked].label);
oldrotation = rotation;
});
}
var isDown = false;
var lastX = w / 2;
var lastY = h / 2;
var curAngle = 0;
var finishAngle = 0;
var angleDeg = 0;
container.on("mousedown", function(d) {
isDown = true;
var thisX = d3.event.x - lastX,
thisY = d3.event.y - lastY;
curAngle = Math.atan2(lastY - d3.event.y, lastX - d3.event.x) // * 180 / Math.PI) ;
if (curAngle < 0) curAngle += 2 * Math.PI;
curAngle = curAngle * 180 / Math.PI;
});
container.on("mousemove", function(d) {
if (isDown) {
var thisX = d3.event.x - lastX,
thisY = d3.event.y - lastY;
angleDeg = Math.atan2(lastY - d3.event.y, lastX - d3.event.x) // * 180 / Math.PI) - curAngle
if (angleDeg < 0) angleDeg += 2 * Math.PI;
angleDeg = angleDeg * 180 / Math.PI;
angleDeg = angleDeg - curAngle + finishAngle;
if (angleDeg < 0) angleDeg += 360;
container.attr("transform", "translate(" + (w / 2 + padding.left) + "," + (h / 2 + padding.top) + ") rotate(" + angleDeg + "," + 0 + "," + 0 + ")");
}
});
container.on("mouseup", function(d) {
finishAngle = angleDeg;
//populate question TODO
picked = 2;
d3.select("#question h1")
.text(data[picked].label);
isDown = false;
有没有办法修改代码并模拟(不一定是真正的物理)轮子在“鼠标”事件发生后减速的一些动量?我正在考虑使用“鼠标移动”发生的时间,但我不确定如何使用车轮移动的距离(特别是当它与最近的车轮运动有关时)