结合vue_D3.js结合vue实现力导向布局

D3是一个数据可视化的JavaScript函数库，允许用户绑定任意数据到DOM，然后根据数据来操作文档，创建可交互式的图表。Vue是一个响应式的前端框架，能够将数据渲染到DOM并抽象出复杂的逻辑。看起来两个库都能完成数据到DOM的渲染，结合起来可能会出现使用逻辑上的冲突，故尝试D3做数据处理，Vue做数据响应式处理来解决此冲突。

现在完成如下示例：

简单力导布局示例

首先不使用Vue的模板操作，直接使用常规D3.js的Dom操作，包括数据处理、数据显示。

从代码中可以看出，在不使用模板操作情况下，视图显示操作和逻辑处理其实是混在一起的，现在优化下代码：

{ {node.name}}

把对视图操作部分移植到Vue的模板中，很好的利用的Vue的数据响应特性，同时用户交互很容易就能运用到Vue的事件流：

        ........methods: {    show(node) {      alert(node.name)    }}....