react-native & d3 选择库

Posted

技术标签:

【中文标题】react-native & d3 选择库【英文标题】:react-native & d3 selection library 【发布时间】:2018-02-10 01:12:38 【问题描述】:

目前正在开发一个带有来自蓝牙库的实时数据流的 react-native 应用程序。因此,我需要一个不断呈现自身的图表,例如 here 示例(如果有人可以建议一个类似的库,那就太好了), 但编写的代码是 htmljavascript。并且因为在这种情况下 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 中不存在。

以上是关于react-native & d3 选择库的主要内容,如果未能解决你的问题,请参考以下文章

一个 d3.select... 相当于 jQuery.children()

D3.js使用简书

在另一个 React-Native 库中使用 React-Native 库

Directx11学习笔记 第一个D3D11程序

potree的第三方库

python数据分析实战-第10章-ipythonNotebook内嵌JavaScript库D3