react-vega icon indicating copy to clipboard operation
react-vega copied to clipboard

Is there any sample to show how to use the data attribute as function ?

Open chabrof opened this issue 4 years ago • 3 comments

Is there any sample to show how to use the data attribute as function ?

Are we expected to use instance of the Vega View in this particular function in order to make some "insert" or "remove" ? If yes, we can unfortunately not access the Vega main instance to use the advanced "Changeset" features (in order to modify one datum for example).

var barData = {
  table: function(dataset){
    vegaView.remove('table', dataset) // remove all
    vegaView.insert('table', otherDataset) // set a new dataset
    // no modify function on vegaView... no access to Vega main instance
    // no need to return anything
    vegaView.run()
  }
};

Thank you very much

chabrof avatar Apr 28 '20 14:04 chabrof

In fact, I found the way to access Vega. Vega is in fact not an instance and I can simply import it at the top of the script, and use the "changeset" features.

But I am still curious about a sample of function for data attribute.

Thanks

chabrof avatar Apr 30 '20 12:04 chabrof

I think I have a working example of this. I am passing in the spec via a prop (established in state), calling some function (in this case, an async fetch), and then merging the response into spec, which effectively uses it as inline data. The Vega component is smart enough to re-render when it sees a spec change, so I think this method may be somewhat extensible.

https://github.com/jamesacklin/react-vega-playground

jamesacklin avatar Sep 27 '20 16:09 jamesacklin

@nerveharp Thank you very much for that example!

I'm having a super hard time getting react-vega 7.4.x to render fetched (via RTKQ) data via the data prop, instead of merging with the spec.

This is why I'm wondering why you went via the merged spec, instead of using the data prop. Could you elaborate?

cpbotha avatar Mar 19 '22 09:03 cpbotha