JS D3更新力图带有Websocket

Question

上下文：我拥有管理设备的Django服务器，我想在这些设备之间显示一个通信图，我决定将D3 Force Graph用于此目的，Django服务器将通过用Websocket重新使用，我希望客户端读取JSON并打印图形。
到目前为止，我已经能够打印静态图，但是我无法实时更新它。

有用链接：

• 核心代码来自
• 尝试关注”正确的方向。

目标：使用WebSocket实时更新力图。

我的JS代码：

var graph = {
  "nodes": [
            {"id": "Agent_1", "group": 1},
            {"id": "Agent_2", "group": 2},
            {"id": "Agent_3", "group": 1},
            {"id": "Agent_4", "group": 3}
        ],
  "links": []
};


const comSocket = new WebSocket(
  'ws://'
  + window.location.host
  + '/ws/com/'
);

comSocket.onmessage = function (e) {
  graph = JSON.parse(e.data).message;
  console.log(graph);

  simulation.nodes(graph.nodes);
  simulation.force("link").links(graph.links);
  simulation.alpha(1).restart();
  };


var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory20);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-2500))
    .force("center", d3.forceCenter(width / 2, height / 2));

  var link = svg.append("g").attr("class", "links").selectAll("line")
  .data(graph.links).enter().append("line")
  .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("g")
    .data(graph.nodes)
    .enter().append("g")

  var circles = node.append("circle")
    .attr("r", 20)
    .attr("fill", function(d) { return color(d.group); });

  var lables = node.append("text").text(function(d) {return d.id;}).attr('x', 16).attr('y', 13);

  node.append("title").text(function(d) { return d.id; });

  simulation.nodes(graph.nodes).on("tick", ticked);
  simulation.force("link").links(graph.links);

  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("transform", function(d) {
          return "translate(" + d.x + "," + d.y + ")";
        })
  };

使用上述代码会产生此错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

在行：

  simulation.nodes(graph.nodes);

在OnMessage（）中，

数据值是JSON，其结构与VAR Graph相同（第1行）。因此，我不知道为什么它可以正确初始化图表，但不会以相同的值刷新。

{'nodes': [{'id': 'Agent_0', 'group': 1}, {'id': 'Agent_1', 'group': 2}, {'id': 'Agent_2', 'group': 1}, {'id': 'Agent_3', 'group': 3}], 'links': [{'source': 'Agent_0', 'target': 'Agent_2', 'value': 1}, {'source': 'Agent_0', 'target': 'Agent_1', 'value': 3}, {'source': 'Agent_0', 'target': 'Agent_3', 'value': 5}, {'source': 'Agent_1', 'target': 'Agent_3', 'value': 3}, {'source': 'Agent_2', 'target': 'Agent_3', 'value': 5}, {'source': 'Agent_1', 'target': 'Agent_2', 'value': 5}]}

Answer 1

这是服务器端问题，发送了错误的类型。

最后，我还将代码更新为最新版本（仅需要更新颜色）。这是最终的工作版本：

var graph = {
 "nodes": [
           {"id": "Agent_0", "group": 1},
           {"id": "Agent_1", "group": 2},
           {"id": "Agent_2", "group": 1},
           {"id": "Agent_3", "group": 3}
       ],
 "links": []
};

var svg = d3.select("svg"),
   width = +svg.attr("width"),
   height = +svg.attr("height");

var color = d3.schemeCategory10;

var simulation = d3.forceSimulation()
   .force("link", d3.forceLink().id(function(d) { return d.id; }))
   .force("charge", d3.forceManyBody().strength(-2500))
   .force("center", d3.forceCenter(width / 2, height / 2));

 var link = svg.append("g").attr("class", "links").selectAll("line").data(graph.links).enter().append("line")
 .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

 var node = svg.append("g").attr("class", "nodes").selectAll("g").data(graph.nodes).enter().append("g")
 var circles = node.append("circle").attr("r", 20).attr("fill", function(d) { return color[d.group]; });
 var lables = node.append("text").text(function(d) {return d.id;}).attr('x', 16).attr('y', 13);

 node.append("title").text(function(d) { return d.id; });

 simulation.nodes(graph.nodes).on("tick", ticked);
 simulation.force("link").links(graph.links);

 function ticked() {
   link
       .attr("x1", function(d) { return d.source.x; })
       .attr("y1", function(d) { return d.source.y; })
       .attr("x2", function(d) { return d.target.x; })
       .attr("y2", function(d) { return d.target.y; });

   node
       .attr("transform", function(d) {
         return "translate(" + d.x + "," + d.y + ")";
       })
 };

const comSocket = new WebSocket(
 'ws://'
 + window.location.host
 + '/ws/com/'
);

comSocket.onmessage = function (e) {
 graph = JSON.parse(e.data).message;
 console.log(graph);
 console.log(typeof graph);

 svg.selectAll("*").remove();
 link = svg.append("g").attr("class", "links").selectAll("line").data(graph.links).enter().append("line")
 .attr("stroke-width", function(d) { return Math.sqrt(d.value); });

 node = svg.append("g").attr("class", "nodes").selectAll("g").data(graph.nodes).enter().append("g")
 circles = node.append("circle").attr("r", 20).attr("fill", function(d) { return color[d.group]; });
 lables = node.append("text").text(function(d) {return d.id;}).attr('x', 16).attr('y', 13);

 node.append("title").text(function(d) { return d.id; });

 simulation.nodes(graph.nodes).on("tick", ticked);
 simulation.force("link").links(graph.links);
 simulation.alpha(1).restart();
 };