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

【问题标题】：Wheel of Fortune fetching draw results from server?命运之轮从服务器获取抽奖结果？
【发布时间】：2015-11-17 03:00:09
【问题描述】：

我通过参考其他在线教程使用 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。

【问题讨论】：

您的问题需要更多上下文。您是否在问如何从浏览器调用服务器并根据结果采取行动？您是否尝试根据服务器结果在spin 函数中设置picked 变量？
是的。当用户点击“Spin”时，页面应该请求服务器获取picked变量。
好的。查看d3.xhr 的文档。你应该能够从那里弄清楚。

标签： javascript d3.js

【解决方案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;
    });

【讨论】：

问题是如何通过 d3.js 获取服务器响应...我知道轮换部分。