Gettings vis.selectAll is not a function when created from within Vue

[davidsielert]

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();

[davidsielert]

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..

[hinguabhishek]

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.

[vinnitu]

so... it was in march.. have you found solution?

[hinguabhishek]

No Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Victor Sklyar <[email protected]> Sent: Monday, September 10, 2018 8:06:25 PM To: shutterstock/rickshaw Cc: hinguabhishek; Comment Subject: Re: [shutterstock/rickshaw] Gettings vis.selectAll is not a function when created from within Vue (#610) so... it was in march.. have you found solution? — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#610 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AH_B-u_SmRCAZQLvHvvBC15xFCa8wi_Nks5uZnjpgaJpZM4R_TJ2>.

[laemtl]

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();