问题标签 [react-d3]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 更新项目并动态更改饼图。React.js + D3
我正在制作一个动态反映项目数量变化的饼图。我可以计算项目的数量,但我在更新项目后将数据存储点堆叠到饼图中。
我提到了这个问题:如何更改状态以制作动态饼图?
我遵循相同的方式,但我的数据未在我的饼图中更新。
饼图的图像
有5个问题类别。
物品图片
用户可以添加和删除项目。项目的数量应该动态地反映在饼图中。我现在只做了 question1 类别。
代码
感谢您花时间阅读我的问题。
d3.js - 在 react-d3 中仅过滤掉 chartSeries 中的一个系列
我正在使用 react-d3 创建一个包含多个相关数据集的图表,我遇到的问题是其中一个数据集不一定对另一个数据集的每个点都有一个条目。我可以将值设置为 0,但这会造成那里有数据但它是 0 的外观,但事实并非如此。
这是我的代码,(deliverRate 总是有数据,adjustedRate 不一定有数据):
有没有办法创建一个过滤器,只在adjustedRate为空的地方放置一个空格?
reactjs - 使用 react d3 在 x 轴上显示日期/时间
我对反应 js 很陌生。我想在图表的 x 轴上显示日期/时间。我已经按照所有步骤从
https://github.com/react-d3/react-d3-tooltip
我收到以下错误:
这是我的代码:
日期为:“生日”:“2011-01-17T00:00:00.000Z”,
javascript - 如何将这些数据转换为等值线世界地图?
我有一个动态生成的形状对象:
{ Hungary: 10, Iceland: 16, Israel: 5, ...}
如何将这些数据转换为等值线世界地图?
我已经尝试过react-simple-maps但它使用一个非常大的 json 作为数据源,并且没有关于从国家计数对象进行简单映射的文档。
javascript - 从 JS 函数调用 React 组件函数
我有渲染 D3 树的 React 组件。代码片段如下所示。
在内部renderTree()
(不是React 函数)我有以下代码片段:
我知道这是从 Js 调用React 的 contextmenu的错误方式,但是我将如何实现呢?我尝试使用参考
但是 D3Tree 组件是从不同的文件中调用的,这就是我得到的原因
this.D3Tree 未定义。
我应该如何调用作为 React 函数的 contextmenu?
javascript - 如何在 react-d3-graph 的节点上显示图像?
问候
我正在尝试使用d3+react创建一个类似技能/天赋树的图表,其中每个节点上都有一个图像,通过显示工具提示(带有技能的描述)对悬停做出反应,并显示一个像索引一样的数字(表示它的水平)。现在这是一个(相对)复杂的问题,但我的问题与我遇到这个问题的第一个地方有关,即在节点上显示图像。
到目前为止的代码:
我发现的所有解决方案要么不使用 reactjs,要么不使用 d3,我无法转换它们。
有谁知道实现我的目标的方法?我应该使用什么或在哪里可以找到有关此的合法文档?我只能找到关于 js 实现的大量文档,但找不到 reactjs。
或者:我应该在哪里以及如何将节点的图像实现到我现有的代码中?
reactjs - 如何根据json数据集中的字段为react-d3-treemap中的矩形赋予自定义颜色?
如何根据json数据集中的字段为react-d3-treemap中的矩形赋予自定义颜色?d3 treemap 应该根据 json 中传递的数据改变颜色。这里 iam 使用 npm 模块 react-d3-treemap 来生成树形图,除了这个用例之外,一切正常。假设数据集中的名称字段是我想要特定颜色的分析。
JSON数据
反应方面是..
在 JSON 数据中,如果值为“名称”:“集群”,那么我想要该矩形的特定颜色,如何实现这一点?任何解决方案或建议?
reactjs - 使用 d3 v3 而不是 d3 v4 react js
我正在使用以下方法导入 d3 库:
但它给了我这个错误:
原因是,代码使用的是 d3 v3,而我正在导入 d3 v4。如何将其限制为使用 d3 v3 代替?在 package.json 中,d3 版本如下所示: