Javascript 使用ajax每秒刷新一次div，并使用现有div显示新div

我有一个网页，我想在其中显示加入我的网站的用户列表以及他们之间的连接

我有用户和他们之间的联系：

 var data=[
           {
              "Id": 38,
               "Connections":[39,40],
               "Name":"ABc"
          },
           {
              "Id": 39,
               "Connections":[40],
               "Name":"pqr"
           },
           {
               "Id": 40,
               "Connections":[],
               "Name":"lmn"
           }]

在上面的示例中，Id为

38的用户连接到
用户39和40
，
用户39连接到用户40，用户40
已经连接到
用户39和用户38，因此用户40连接数组为空

我有一个web服务，我将每1-2秒启动一次，以在此页面上显示新加入的用户，以及我存储在表中的现有用户之间的新连接，此web服务将获取所有用户及其连接

所以一开始我的页面将被加载，但之后我的页面将不会刷新，新用户应该被显示，新的连接应该通过AJAX调用连接到我的web服务

到目前为止，我已经成功地管理显示用户和他们之间的连接，但现在坚持使用auto refresh div只需1-2秒，这样就可以在不进行以前的连接的情况下建立新的连接

现在发生的是当我刷新我的div时，以前的连接再次建立

我正在使用这个插件：

这是我制作的一个演示；请忽略我在html中保留的js，因为这是插件（Jquery connections.js）：
根据我们为解决问题而达成的讨论要点：


将div元素替换为canvas以简化和加快渲染
使用第三方js库将节点和边渲染到画布中
当您获取新数据时，如果新数据和现有数据之间存在差异，您可以重新创建或将新项目添加到包含div的视图中，我希望在
jQuery connection js
插件中会有添加新连接的选项。这里面有什么阻碍？可能是这个插件有助于快速实现。@DipakChandranP：好的，我可以向现有数据添加新数据，但如果你看到我的代码，我会循环每个div，这就是问题所在。@DipakChandranP：你看到我的js bin并检查输出和代码了吗？你正在循环所有div以找到问题所在找出确切的节点元素并修改它，对吗？我无法理解每个js功能到底在做什么，你能为每个函数添加一些注释吗？很抱歉，我退出了使用canvas，因为它需要大量的代码重构和web应用程序缓慢？动画仍然有一些问题，问题仍然存在，但canvas花费了很多时间，所以我已经退出使用。非常感谢你在整个任务中提供的指导。这真的意味着很多否则的话，我肯定会为此而挣扎