react-native＆d3选择库

Question

Currently working on a react-native app with live data streaming from a Bluetooth library. Therefore i need a chart that is constantly rendering itself like the example here (if anyone can suggest a similar library that would be great), but the code is written is html & javascript. and because there are conflicts between React & d3 in this case d3.selection library. i try to work my way around it according to this article . i try to convert it into react native code but the selection library does not work, and i couldn't find any example using d3.selection in react native. I'm wondering if d3-selection supports react native. and this is the error i got is this.querySelectorAll is not a function, appreciate if anyone can help me out, here is the code i need working.

select(node)
  .selectAll("rect")
  .data(this.props.data)
  .style("fill", "#fe9922")
  .attr("x", (d, i) => i * 25)
  .attr("y", d => this.props.size[1] - yScale(d))
  .attr("height", d => yScale(d))
  .attr("width", 25);

Answer 1

There are two ways to make d3 work with react-native. one is with react-native ART and other one is with SVG using react-native-svg. For some 3D graph, react-native-svg works better. You use refs attribute in a d3 selection to refer to svg.