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,以启用依赖项收集.具有以$或_以跳过的键开头的属性.

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