使用AJAX动态更新D3.js仪表盘指针无响应问题求助

我帮你排查了代码里的几个关键问题，先从最影响功能的点说起：

1. setInterval调用方式错误 #

你现在写的 setInterval(updategauge(), 2000); 会立即执行一次updategauge函数，然后把函数的返回值（这里是undefined）传给setInterval，导致定时器根本不会重复触发。正确的写法是传递函数引用，不要加括号：

setInterval(updategauge, 2000);

这样定时器才会每隔2秒自动调用一次updategauge函数。

2. 确认setNeedle方法的参数要求 #

从初始化代码看，你设置的仪表盘范围是[0,100]，初始值设为0.5*(0+100)=50，所以指针默认停在50。如果setNeedle方法需要的是实际数值（比如0对应0，100对应满刻度），那你写的gg.setNeedle(0)是对的；但有些仪表盘库的setNeedle需要传入0到1之间的比例值（比如0对应0，1对应100），那你需要改成gg.setNeedle(0/100)（或者直接gg.setNeedle(0)，如果库内部会自动处理比例转换）。

不过既然你说硬设0都不动，先把setInterval的问题修复，这是最可能的核心原因。

3. 修复后的完整AJAX代码 #

把你的AJAX部分代码修改成这样，同时增加了错误日志方便排查：

$(document).ready(function() {
  function updategauge() {
    var myurl = "http://localhost:5500/gauge";
    $.ajax({
      type: "GET",
      url: myurl,
      //data: {"macID": $("#macid input").val()},
      crossDomain: true,
      dataType: "json",
      success: function(data) {
        console.log(data.ip);
        console.log(JSON.stringify(data));
        // 这里可以后续改成用后台返回的数值，比如data.value
        gg.setNeedle(0); // 先测试硬设为0
      },
      error: function(xhr, status, error) {
        // 新增错误日志，方便排查AJAX请求是否成功
        console.error("AJAX请求失败:", status, error);
      }
    });
  }

  var svg = d3.select("svg");
  var g = svg.append("g").attr("transform", "translate(450,350)");
  var domain = [0, 100];
  var gg = viz
    .gg()
    .domain(domain)
    .outerRadius(300)
    .innerRadius(30)
    .value(0.5 * (domain[1] + domain[0]))
    .duration(1000);
  gg.defs(svg);
  g.call(gg);
  d3.select(self.frameElement).style("height", "700px");

  // 修复setInterval的调用方式
  setInterval(updategauge, 2000);
  // 手动调用一次，页面加载完成就更新一次指针
  updategauge();
});

额外排查点 #

• 打开浏览器控制台（F12），查看AJAX请求是否成功，有没有报错信息。如果请求失败，可能是跨域问题或者Tornado后端的路由配置问题。
• 可以在控制台直接输入 gg.setNeedle(0)，看指针是否移动。如果手动调用都不动，那可能是gauge.js里的setNeedle方法实现有问题，或者初始化时的配置遗漏了某些参数。

内容的提问来源于stack exchange，提问作者Knight