vue.jsのdataをd3.json内で呼び出したい

vue.jsの data で定義した変数を、vueの mounted で定義した d3.json 内で呼び出したいのですが、よくわからないです。

下のコードようにクリックした際に、 active = true にしたいです

js
1export default {
2  data() {
3    return {
4      active: false,
5    }
6
7  },
8  mounted() {
9    var svg = d3.select(this.$el).append("svg")
10    var width = +svg.attr('width', width * 10);
11    var height = +svg.attr('height', height * 100);
12    var path = geoPath();
13    var title = svg.append("text")
14    var projection = geoCylindricalStereographic()
15    var path = d3.geo.path().projection(projection);
16    var graticule = d3.geo.graticule();
17    d3.json("static/readme-world-110m.json", function(error, world) {
18      if (error) throw error;
19
20      var countries = topojson.feature(world, world.objects.countries).features,
21          i = -1,
22          n = topojson.neighbors(world.objects.countries.geometries);
23      
24      var country = svg.selectAll(".country")
25          .data(countries)
26          .enter().insert("path", ".graticule")
27          .attr("class", "country")
28          .attr("d", path)
29          .attr("class", "feature")
30          .on("click", click)
31          .style("fill", function(d, i) { return color(d.color = d3.max(n[i], function(n) { return countries[n].color; }) + 1 | 0); });
32    })
33
34    function click(d){
35      console.log(d.id);
36      alert(d.id)
37    }
38  },
39  methods: {
40    open: function() {
41      this.active = true
42    },
43    close: function() {
44      this.active = false
45    }
46  },
47}

行動規範の内容に同意します

回答1件

自己解決

解決しました

vue
1export default {
2  data() {
3    return {
4      active: false,
5      message: '',
6    }
7
8  },
9  mounted() {
10    var that = this;
11    var svg = d3.select(this.$el).append("svg")
12    var width = +svg.attr('width', width * 10);
13    var height = +svg.attr('height', height * 100);
14    var path = geoPath();
15    var title = svg.append("text")
16    var projection = geoCylindricalStereographic()
17    var path = d3.geo.path().projection(projection);
18    var graticule = d3.geo.graticule();
19    d3.json("static/readme-world-110m.json", function(error, world) {
20      if (error) throw error;
21
22      var countries = topojson.feature(world, world.objects.countries).features,
23          i = -1,
24          n = topojson.neighbors(world.objects.countries.geometries);
25
26      var country = svg.selectAll(".country")
27          .data(countries)
28          .enter().insert("path", ".graticule")
29          .attr("class", "country")
30          .attr("d", path)
31          .attr("class", "feature")
32          .on("click", click)
33          .style("fill", function(d, i) { return color(d.color = d3.max(n[i], function(n) { return countries[n].color; }) + 1 | 0); });
34    })
35
36    function onActive(text){
37      that.modal = true
38      that.message = text
39      console.log(that.message)
40    }
41
42    function click(d){
43      onActive(d.id)
44    }
45  },
46}