Node.js 如何在VueJS上创建图形_Node.js_Graph_Vue.js

Node.js 如何在VueJS上创建图形

node.js graph vue.js

Node.js 如何在VueJS上创建图形,node.js,graph,vue.js,Node.js,Graph,Vue.js,我试图用从API接收到的数据制作一个图，并将其放在一个图（）上—强制定向图但是，我不确定如何在VueJs上执行此操作，或者是否有更简单的工具来执行此操作 D3力定向图似乎有点复杂，可能已经有一个现成的库来实现这一点了？评论中提到的vue-D3包只是将D3添加到vue原型中，这样就可以使用此功能访问它。$D3 我已经测试过那个软件包，但它不适用于我的D3版本。看起来像是套管问题（D3而不是D3）。所以我手动添加了原型我不知道是否有一个更容易创建力图的库，但请看下面的演示或这个我修改了链接中的

我试图用从API接收到的数据制作一个图，并将其放在一个图（）上—强制定向图

但是，我不确定如何在VueJs上执行此操作，或者是否有更简单的工具来执行此操作

D3力定向图似乎有点复杂，可能已经有一个现成的库来实现这一点了？

评论中提到的

vue-D3

包只是将D3添加到vue原型中，这样就可以使用

此功能访问它。$D3

我已经测试过那个软件包，但它不适用于我的D3版本。看起来像是套管问题（D3而不是D3）。所以我手动添加了原型

我不知道是否有一个更容易创建力图的库，但请看下面的演示或这个

我修改了链接中的示例，创建了一个力定向图。演示正在运行，但正如您所提到的，它相当复杂。此外，还可以改进从SVG到Vue.js模型的绑定。但我找不到更好的方法

例如，单击添加新节点并不意味着只向阵列添加新节点，但这应该是Vue.js组件的目标。一旦数据发生变化，SVG图形应自动更新

目前，Vue.js中的节点和链接未在组件中使用，因为我不知道如何添加图形的更新

如果您知道如何添加模型数据更新，请让我知道。通过删除SVG并重新创建它，刷新整个图表非常简单。（请参见重新加载按钮）

//https://unpkg.com/vue-d3@0.1.0-->仅将d3添加到Vue.prototype中，但未按预期工作（d3为小写）
虚拟样机$d3=d3；
常量URL=https://demo5147591.mockable.io/miserables'; // 由于jsonp支持，数据从下面的链接复制
//'https://bl.ocks.org/mbostock/raw/4062045/5916d145c8c048a6e3086915a6be464467391c62/miserables.json';
//控制台日志（window.d3）；
常数d3ForceGraph={
模板：`
{{mousePosition}}
重新加载
`,
数据（）{
返回{
节点：[]，
链接：[]，
模拟：未定义，
鼠标位置：{
x:0,，
y:0
}
}
},
安装的（）{
this.loadData（）；//最初加载json
},
方法：{
//加载数据
loadData（）{
this.$svg=$（this.$el）.find（'svg'）；
让svg=this.$d3.select（this.$svg.get（0）），//this.$d3.select（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”）；
//log（$（this.$el）.find（'svg'）.get（0））；
this.simulation=this.$d3.forceSimulation（）
.force（“link”，this.$d3.forceLink（）.id（函数（d）{
返回d.id；
}))
.force（“充电”，这是$d3.forceManyBody（））
.力（“中心”，这是$d3.力中心（宽度/2，高度/2））；
设color=this.$d3.scaleOrdinal（this.$d3.schemeCategory20）；
$.getJSON（URL，（图形）=>{
//json（“miserables.json”），函数（错误，图形）{//已加载
//if（error）throw error；//需要以不同的方式实现
设nodes=graph.nodes；
让links=graph.links；
让link=svg.append（“g”）
.attr（“类”、“链接”）
.selectAll（“行”）
.data（links）//graph.links）
.enter（）.append（“行”）
.attr（“笔划宽度”，函数（d）{
返回Math.sqrt（d.value）；
});
让node=svg.append（“g”）
.attr（“类”、“节点”）
.selectAll（“圆圈”）
.data（节点）//graph.nodes）
.enter（）.append（“圆”）
.attr（“r”，5）
.attr（“填充”，功能（d）{
返色（d组）；
})
.call（这是$d3.drag（）
.on（“开始”，此为.dragstarted）
.on（“拖动”，此为.拖动）
.在（“结束”，此为dragended））；
node.append（“标题”）
.文本（功能（d）{
返回d.id；
});
这是模拟
.nodes（图.nodes）
。在（勾选）上；
这个。模拟。力（“链接”）
.links（links）；//graph.links）；
函数勾选（）{
链接
.attr（“x1”，函数（d）{
返回d.source.x；
})
.attr（“y1”，函数（d）{
返回d.source.y；
})
.attr（“x2”，函数（d）{
返回d.target.x；
})
.attr（“y2”，功能（d）{
返回d.target.y；
});
节点
.attr（“cx”，功能（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
});
}
})
},
重新加载（）{
//log（'reloading…'）；
这是.$svg.empty（）；//清除svg-->重新创建力图的最简单方法。
这是loadData（）；
},
//鼠标事件
onMouseMove（evt）{
//console.log（evt，this）
此。鼠标位置={
x:evt.clientX，
y:evt.clientY
}
},
//拖动事件处理程序
拖动启动（d）{
如果（！this.$d3.event.active）this.simulation.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
},
（d）{
d、 fx=此$d3.event.x；
d、 fy=此$d3.event.y；
},
德拉根德（d）{
如果（！this.$d3.event.active）this.simulation.alphaTarget（0）；
d、 fx=null；
d、 fy=null；
}
}
};
新Vue({
el:“#应用程序”，
数据（）{
返回{}
},
组成部分：{
D3测力仪
}
})；

.links行{
行程：#999；
笔划不透明度：0.6；
}
.节点圆{
冲程：#fff；
笔划宽度：1.5px；
}

我通过提供一个示例来回答关于vue+d3的另一个问题

d3.j

    <head>
       <script type="text/javascript" src="https://unpkg.com/vue"> 
       </script>
       <link rel="stylesheet" type="text/css" href="https://rawgit.com/emiliorizzo/vue-d3-network/master/dist/vue-d3-network.css">
       <script type="text/javascript" src="https://rawgit.com/emiliorizzo/vue-d3-network/master/dist/vue-d3-network.umd.js"></script>
    </head>

  <body>
    <div id="app">
    <d3-network :net-nodes="nodes" :net-links="links" :options="options">
    </d3-network>
  </div>
  </body>

var D3Network = window['vue-d3-network']
new Vue({
  el: '#app',
  components: {
    D3Network
  },
  data () {
    return {
      nodes: [
        { id: 1, name: 'my node 1' },
        { id: 2, name: 'my node 2' },
        { id: 3, _color:'orange' },
        { id: 4 },
        { id: 5 },
        { id: 6 },
        { id: 7 },
        { id: 8 },
        { id: 9 }
      ],
      links: [
        { sid: 1, tid: 2, _color:'red' },
        { sid: 2, tid: 8, _color:'f0f' },
        { sid: 3, tid: 4,_color:'rebeccapurple' },
        { sid: 4, tid: 5 },
        { sid: 5, tid: 6 },
        { sid: 7, tid: 8 },
        { sid: 5, tid: 8 },
        { sid: 3, tid: 8 },
        { sid: 7, tid: 9 }
      ],
      options:
      {
        force: 3000,
        nodeSize: 20,
        nodeLabels: true,
        linkWidth:5
      }
    }
  },
})