Question

我使用d3.js通过在线参考其他教程制作了一个财富之轮。 Wheel工作正常，但我仍然坚持从服务器获取旋转结果。

旋转代码如下：

vis.transition()
  .duration(3000)
  .attrTween("transform", rotTween)
  .each("end", function(){
    //mark prize as seen
    d3.select(".slice:nth-child(" + (picked + 1) + ") path")
      .attr("fill", "#111");

    //populate prize
    d3.select("#prize h1")
      .text(data[picked].prize);
    oldrotation = rotation;
});

完整源代码可从JSFiddle获得。如何从服务器获取结果？服务器的示例响应如下：

{"hit": 1}

这是一个JSON告诉要击中哪个弧。

Answer 1

您可以这样做：

var totalNoOfObjects = 100
var picked = 1;  // should be the server response from 0 to 99
var  ps       = 360/data.length,
rng      = Math.floor((((totalNoOfObjects-picked)/totalNoOfObjects)* 360) + 1440);

rotation = (Math.round(rng / ps) * ps);

rotation += 90 - Math.round(ps/2);
vis.transition()
   .duration(3000)
   .attrTween("transform", rotTween)
   .each("end", function(){
                //populate the result
        d3.select("#result h1")
          .text(data[picked].result);
          oldrotation = rotation;
    });

命运之轮从服务器获取抽奖结果？

1 个答案: