Javascript websocket消息触发d3js图表更新

在Python中运行autobahn websocket服务器，并在html前端获取json更新。当消息到达时，该值（在本例中为“temp”）将显示为带有innerHTML的数字，并且该部分工作正常

我们还得到了一个拨号表（d3js），但更新是由代码末尾的setInterval函数启动的，这远远不够理想。如何通过websocket更新“onmessage”量表

//---websocket部分--
var-sock=null；
var displaynumber=null；
var tempdata=null；
window.onload=函数（）{
var-wsuri；
displaynumber=document.getElementById（'disp'）；
如果（window.location.protocol==“文件：”）{
wsuri=“ws://……：9000”；
}否则{
wsuri=“ws://”+window.location.hostname+“：9000”；
}
//设置新的websocket
如果（“窗口中的WebSocket”）{
sock=新的WebSocket（wsuri）；
}else if（“窗口中的MozWebSocket”）{
sock=新的MozWebSocket（wsuri）；
}否则{
disp（“浏览器不支持WebSocket！”）；
window.location=”http://autobahn.ws/unsupportedbrowser";
}
如果（袜子）{
//sock.onopen=function（）{}；
sock.onclose=函数（e）{
sock=null；
};
sock.onmessage=函数（e）{
//数据将作为字符串发送，需要转换为对象
var jsondata=JSON.parse（e.data）；
tempdata=jsondata.temp；
显示（临时数据+C）；
};
}
功能显示（m）{
displaynumber.innerHTML=m；
}
//----这是拨号表部分
拨号表（）；
函数拨号图（）{
var功率计=仪表（“#功率计”{
尺寸：300，
clipWidth:300，
克利菲特：300，
环宽：60，
最小值：0，
最大值：100，
过渡期：1000，
});
powerGauge.render（）；
函数updateReadings（）{
powerGauge.update（tempdata）；
}
updateradings（）；
setInterval（函数（）{
updateradings（）；
}, 2 * 1000);
}
}

在

拨号表定义的末尾，添加
返回功率表
。然后当你调用
dialChart（），将结果保存到变量中。然后，不要在套接字回调中写入
tempdata
，而是调用
powergaugeevariable.update（jsondata.temp）
工作得很好。谢谢
<script type="text/javascript">

//---the websocket part--
var sock = null;
var displaynumber = null;
var tempdata = null;

window.onload = function () {
  var wsuri;
  displaynumber = document.getElementById('disp');

  if (window.location.protocol === "file:") {
    wsuri = "ws://...:9000";
  } else {
    wsuri = "ws://" + window.location.hostname + ":9000";
  }

  //set up a new websocket
  if ("WebSocket" in window) {
      sock = new WebSocket(wsuri);
  } else if ("MozWebSocket" in window) {
      sock = new MozWebSocket(wsuri);
  } else {
      disp("Browser does not support WebSocket!");
               window.location = "http://autobahn.ws/unsupportedbrowser";
  }

  if (sock) {
    //sock.onopen = function() {};

    sock.onclose = function(e) {
      sock = null;
    };

    sock.onmessage = function(e) {
      // e.data will be sent as a string and need to be converted to object
      var jsondata = JSON.parse(e.data);
      tempdata = jsondata.temp;
      disp(tempdata + " C");
    };
  }

  function disp(m) {
    displaynumber.innerHTML = m;
  }


  //----This is the dial chart part

  dialChart();

  function dialChart() {
    var powerGauge = gauge('#power-gauge', {
      size: 300,
      clipWidth: 300,
      clipHeight: 300,
      ringWidth: 60,
      minValue: 0,
      maxValue: 100,
      transitionMs: 1000,
    });

    powerGauge.render();

    function updateReadings() {
      powerGauge.update(tempdata);
    }

    updateReadings();
    setInterval(function() {
      updateReadings();
    }, 2 * 1000);
  }
}

</script>