VUE.JS将数据传递给D3 - 做得对吗？

Question

玩vue.js 0.12。 寻找将数据绑定到d3的最佳方法。 在示例中[材料]最终保持参数以生成数据D3图，其使用D3绘制为不同的系列。 我使用vue来管理用于生成数据的参数的输入/删除/编辑，并将这些参数传递给生成数据的函数，然后调用D3在指定的标签上绘图。

这有效。 我只是不知道我做得对。 目前我正在做以下事情：

var test = new Vue({
  el: '#materials',

  data: {
    materials: [],
  },


  ready: function() {
    this.$watch("materials", function(value) {

      // do some parsing and pass to D3

      rock.test(JSON.parse(JSON.stringify(this.materials)));
      }

    });
  },

// rest of vue commands 

////////////////////////////////////////////////

// D3 plotting

(function(exports) {

// all my D3 code for handling the passed object from vue 
// exports.test takes the parameters passed from vue, converts them into 
// the data I want to plot, and calls D3 to plot multiple series 


})(this.rock = {});

我正在使用ready函数来观察何时使用要绘制的新系列更新vue模型，然后将数据对象传递给D3。 这是正确的方法，还是有更好的方法呢？ 缺点是我必须使用vue.js来跟踪数据的更新并重新绘制D3图表。 如果我使用D3来处理以交互方式从图中删除数据，在我的用例中，我与vue模型不同步（不确定如何将D3链接到vue数据模型）。

建议绝对赞赏。

Answer 1

当我必须创建一个嵌入了d3图形的vue组件时，我的所有数据变量都以_（下划线）开头，因此它们可以是普通的d3对象，没有vue setter和getter：

https://github.com/jardimin/hipervideo/blob/master/app/vue/components/sidebar-graph.vue#L107

这个链接解释了这一点： http ： //vuejs.org/api/options.html#data

在引擎盖下，Vue.js附加一个隐藏属性__ob__并递归地将对象的可枚举属性转换为getter和setter以启用依赖项收集。 将跳过以$或_开头的键的属性。

我认为你需要完全相反，以获得双向链接，但也许这些信息有帮助。