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 模型不同步（不确定如何 link D3 到 vue 数据模型）。

非常感谢您的建议。

Answer 1

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

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

这在 link 中有解释： http://vuejs.org/api/options.html#data

Under the hood, Vue.js attaches a hidden property __ob__ and recursively converts the object’s enumerable properties into getters and setters to enable dependency collection. Properties with keys that starts with $ or _ are skipped.

我认为您需要恰好相反，以便获得双向 link，但也许这些信息会有所帮助。

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

VUE.JS passing data to D3 - doing it right?

javascript

d3.js

vue.js