如何使用D3 js显示客户端和服务器之间的数据传输

Question

我对D3 js还是很陌生，并试图实现某些功能。这是我的用例，请参考图片（https://i.stack.imgur.com/IuSDB.png）。

在D3 js中，我想使用（矩形框svg）显示客户端A（矩形框svg）和客户端B。还有从客户端发出的数据（使用某种图像或圆形svg或某种动画（圆形）https://bl.ocks.org/kafunk/91f7b870b79c2f104f1ebacf4197c9dc）。同样，要显示客户端使用某种不同的颜色上下显示（如果处于活动状态，则将矩形颜色填充为绿色，或者向下填充红色。所有这些功能都应从JSON中读取属性（可以是任意数量的属性。

例如：

[  
   {  
      "status":{  
         "isClientA":false,
         "isClientB":true
      },
      "data":{  
         "ClientAData":0,
         "ClinetBData":100
      }
   }
];

请参考高级示例：http://bl.ocks.org/benjchristensen/1473535。

我们非常感谢您的帮助。

谢谢

enter image description here