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 Androidhttps://aka.ms/ghei36

---

From: Victor Sklyar notifications@github.com 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 GitHubhttps://github.com/shutterstock/rickshaw/issues/610#issuecomment-419935951, or mute the threadhttps://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();