Gettings vis.selectAll is not a function when created from within Vue
davidsielert opened this issue · comments
Nothing is really spectacular from my vue component code but I'm getting
at klass.render (rickshaw.js:3603)
at Rickshaw.Graph.render (rickshaw.js:525)
with this simple creation code..
this.graph = new Rickshaw.Graph({
element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
renderer: 'area',
stroke: true,
series: [{
data: this.data,
color: this.color,
}]
});
this.graph.render();
This seems to be related to storing the instance on the Vue instance (this) Compare these...
Doesn't work - throws vis.selectAll is not a function
this.graph = new Rickshaw.Graph({
element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
renderer: 'area',
stroke: true,
series: [{
data: this.data,
color: this.color,
}]
});
this.graph.render();
This code works
var rs1 = new Rickshaw.Graph({
element: document.querySelector(`#VB-${this.id}`), //have to call id like this cause the uuid's can start with an integer
renderer: 'area',
stroke: true,
series: [{
data: this.data,
color: this.color,
}]
});
rs1.render();
But why would where I'm storing the instance variable matter ? I don't understand this..
Hi
I am facing same issue, need to declare a Graph object globally, when I create graph object as component member graph not rendering. can you please provide solution for this.
so... it was in march.. have you found solution?
Found a solution: Vue wraps all data elements in an observer. This override all methods attached to them. In order to solve this issue, create graph as an array:
data() {
return {
graph: []
},
methods: {
initGraph() {
this.graph[0] = new Rickshaw.Graph({
...
});
this.graph[0].render();