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，以启用依赖项收集。带有以$或_开头的键的属性将被跳过。

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

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

1 个答案: