[Vuejs]-Can I use vue.js to keep track of changes in d3.js scales

by

0👍

✅

You can insert an additional data variable and change it externally:

const v = new Vue({
  el: '#example',
  data() {
    return {
      colorScale: d3.scaleLinear().range(['#FFFFFF', '#0000FF'])
    }
  },
  computed: {
    color: function() {
      return this.colorScale(0.5);
    }
  }
});

setTimeout(() => {
  v.colorScale = d3.scaleLinear().range(['#FFFFFF', '#FF0000'])
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="example">
    <svg width="100" height="100">
        <circle r="50" cx="50" cy="50" :fill="color"></circle>
    </svg>
</div>

Leave a comment