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

Question

使用 vue.js 0.12。寻找将数据绑定到 d3 的最佳方法。在示例中，[materials] 最终保存了生成数据 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 以启用依赖项收集。键以$ 或_ 开头的属性将被跳过。

我认为您需要正好相反，才能获得双向链接，但也许这些信息会有所帮助。