react-native & d3 选择库

Posted 2023-02-22

【中文标题】react-native & d3 选择库

【英文标题】：react-native & d3 selection library

【发布时间】：2018-02-10 01:12:38

【问题描述】：

目前正在开发一个带有来自蓝牙库的实时数据流的 react-native 应用程序。因此，我需要一个不断呈现自身的图表，例如 here 示例（如果有人可以建议一个类似的库，那就太好了）， 但编写的代码是 html 和 javascript。并且因为在这种情况下 d3.selection 库中 React 和 d3 之间存在冲突。我尝试根据this article 解决它。我尝试将其转换为反应本机代码，但选择库不起作用，我找不到任何在反应本机中使用 d3.selection 的示例。我想知道 d3-selection 是否支持本机反应。这是我得到的错误是 this.querySelectorAll 不是一个函数，如果有人可以帮助我，不胜感激，这是我需要工作的代码。

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

【问题讨论】：

你有没有找到任何解决方案来提及场景？？我也在寻找同样的***.com/questions/45713519/…

我最后并没有在我的项目中使用 d3，但后来我对与 d3 的反应做了一些研究，d3 有两层，第一层是你设置比例的数学，第二层是操作 dom 中的 svg 元素，这并不总是适用于 react，因为 react 也会渲染 dom，解决方法是使用 D3 进行数学运算，并将函数传递给图形组件并让图形组件进行 svg 的渲染，因此 react-native 甚至没有一个 dom 开始，我认为情况也是如此，尝试对 react 和 d3 进行一些研究。

【参考方案1】：

有两种方法可以让 d3 与 react-native 一起工作。一种是使用 react-native ART，另一种是使用 react-native-svg 使用 SVG。对于某些 3D 图形，react-native-svg 效果更好。您在 d3 选择中使用 refs 属性来引用 svg。

【讨论】：

你能举一个例子，说明在 react-native 中使用“d3 选择中的 refs 属性来引用 svg”是如何工作的吗？我可以不得到一些与此相关的东西。我相信因为 d3 select 指的是 dom 并且 dom 在 react-native 中不存在。