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

Question

Playing around with vue.js 0.12. Looking for the best way to bind data to d3. In the example [materials] ultimately holds the parameters to generate the data D3 plots, which are plotted as different series using D3. I use vue to manage the input / deletion / editing of the parameters used to generate the data and pass those parameters to a function which generates the data which then calls D3 to plot on a specified tag.

This works. I just don't know if I'm doing it right. Currently I'm doing the following:

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 = {});

I'm using the ready function to watch when the vue model is updated with a new series to plot, and then passing the data object to D3. Is this the correct way, or is there a better way of doing this? The downside is I have to use vue.js to keep track of updates to the data and re-draw D3 chart. If I use D3 to handle removing data from graphs in an interactive way, in my use-case, I get out of sync with the vue model (not sure how to link D3 to vue data model).

Advice definitely appreciated.

Answer 1

When I had to create a vue component with a d3 graph embedded, all my data variables begin with _ (underscore), so they can be plain d3 objects, without vue setters and getters:

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

This is explained in this 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.

I think you need exactly the inverse of this, in order to get the bidirectional link, but maybe this information helps out.