使用vue数据变化时d3图表自动更新

Question

我希望每次我的模拟更改并传递给 dataa 时，条形图都可以重新呈现或更新。我在条形图组件中查看了 dataa，但它没有用。 "console.log('this', this.dataa);" 从不触发。我不知道哪一部分是错的。

这是我的代码：

<sr-bar-chart
 :title= "descriptionText.title_traffic"
 :dataa= "mock"
 :unit="descriptionText.avg7d_unit_people"
 :index="'1'"
 :barColor="'#adadad'"

和条形图组件

export default {
 name: 'sceneBarChart',
 props: ['title', 'dataa', 'unit', 'index', 'barColor'],
  data() {
  return {
    count: 0
  };
},
watchers: {
  dataa() {
    console.log('this', this.dataa);
    this.drawMap();
  }
 },
 methods: {
  drawMap() {
   ....
  }
 },
 mounted() {
  this.drawMap();
}

};

谢谢！

Answer 1

使用 watch 而不是 watcher 并且为了更好的衡量，我也会添加 newValue 参数。

 watch: {
   dataa(newValue) {
     console.log('this', this.count);
     this.drawMap();
   }

这里有更多关于监视属性的信息：https://vuejs.org/v2/guide/computed.html#Watchers

使用vue数据变化时d3图表自动更新

d3 chart update automatically when data change by using vue

d3.js

c3.js

vue-component

vuejs2