Question

我正在使用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;

有没有办法修改代码并模拟（不一定是真正的物理）轮子在“鼠标”事件发生后减速的一些动量？我正在考虑使用“鼠标移动”发生的时间，但我不确定如何使用车轮移动的距离（特别是当它与最近的车轮运动有关时）

模拟车轮阻力/摩擦？

0 个答案: