title: VUE.JS passing data to D3 - doing it right?
body: <p>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.  </p>
  
  <p>This works.  I just don't know if I'm doing it right. Currently I'm doing the following: </p>
  
  <pre><code>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 = {});
  </code></pre>
  
  <p>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).</p>
  
  <p>Advice definitely appreciated. </p>