问题标签 [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.

0 投票
1 回答
350 浏览

javascript - 反应 d3 图形错误

d3_error我有两张图,一张是通过调用 api 并从中获取数据来制作的,另一张是通过操纵它的数据来制作的。

虽然第一个图表是由函数 getGraphData() 绘制的,但另一个没有。

当代码被执行时,我得到了错误

TypeError:无法读取未定义的属性“地图”

两个组件的代码相同,但其中一个不起作用。

这里有什么问题?

0 投票
1 回答
4380 浏览

reactjs - 更新项目并动态更改饼图。React.js + D3

我正在制作一个动态反映项目数量变化的饼图。我可以计算项目的数量,但我在更新项目后将数据存储点堆叠到饼图中。

我提到了这个问题:如何更改状态以制作动态饼图?

我遵循相同的方式,但我的数据未在我的饼图中更新。

饼图的图像

有5个问题类别。

在此处输入图像描述

物品图片

用户可以添加和删除项目。项目的数量应该动态地反映在饼图中。我现在只做了 question1 类别。

在此处输入图像描述

代码

感谢您花时间阅读我的问题。

0 投票
1 回答
178 浏览

d3.js - 在 react-d3 中仅过滤掉 chartSeries 中的一个系列

我正在使用 react-d3 创建一个包含多个相关数据集的图表,我遇到的问题是其中一个数据集不一定对另一个数据集的每个点都有一个条目。我可以将值设置为 0,但这会造成那里有数据但它是 0 的外观,但事实并非如此。

这是我的代码,(deliverRate 总是有数据,adjustedRate 不一定有数据):

有没有办法创建一个过滤器,只在adjustedRate为空的地方放置一个空格?

0 投票
1 回答
1087 浏览

reactjs - 使用 react d3 在 x 轴上显示日期/时间

我对反应 js 很陌生。我想在图表的 x 轴上显示日期/时间。我已经按照所有步骤从

https://github.com/react-d3/react-d3-tooltip

我收到以下错误:

这是我的代码:

日期为:“生日”:“2011-01-17T00:00:00.000Z”,

0 投票
0 回答
45 浏览

javascript - 如何将这些数据转换为等值线世界地图?

我有一个动态生成的形状对象:

{ Hungary: 10, Iceland: 16, Israel: 5, ...}

如何将这些数据转换为等值线世界地图?

我已经尝试过react-simple-maps但它使用一个非常大的 json 作为数据源,并且没有关于从国家计数对象进行简单映射的文档。

0 投票
1 回答
2603 浏览

javascript - 从 JS 函数调用 React 组件函数

我有渲染 D3 树的 React 组件。代码片段如下所示。

在内部renderTree()不是React 函数)我有以下代码片段:

我知道这是从 Js 调用React 的 contextmenu的错误方式,但是我将如何实现呢?我尝试使用参考

但是 D3Tree 组件是从不同的文件中调用的,这就是我得到的原因

this.D3Tree 未定义。

我应该如何调用作为 React 函数的 contextmenu?

0 投票
1 回答
1452 浏览

javascript - 如何在 react-d3-graph 的节点上显示图像?

问候

我正在尝试使用d3+react创建一个类似技能/天赋树的图表,其中每个节点上都有一个图像,通过显示工具提示(带有技能的描述)对悬停做出反应,并显示一个像索引一样的数字(表示它的水平)。现在这是一个(相对)复杂的问题,但我的问题与我遇到这个问题的第一个地方有关,即在节点上显示图像

到目前为止的代码:

显示这个: 到目前为止我的图表

我发现的所有解决方案要么不使用 reactjs,要么不使用 d3,我无法转换它们。

有谁知道实现我的目标的方法?我应该使用什么或在哪里可以找到有关此的合法文档?我只能找到关于 js 实现的大量文档,但找不到 reactjs。

或者:我应该在哪里以及如何将节点的图像实现到我现有的代码中?

0 投票
1 回答
480 浏览

reactjs - 如何根据json数据集中的字段为react-d3-treemap中的矩形赋予自定义颜色?

如何根据json数据集中的字段为react-d3-treemap中的矩形赋予自定义颜色?d3 treemap 应该根据 json 中传递的数据改变颜色。这里 iam 使用 npm 模块 react-d3-treemap 来生成树形图,除了这个用例之外,一切正常。假设数据集中的名称字段是我想要特定颜色的分析。

JSON数据

反应方面是..

在 JSON 数据中,如果值为“名称”:“集群”,那么我想要该矩形的特定颜色,如何实现这一点?任何解决方案或建议?

0 投票
1 回答
2997 浏览

javascript - 使用 react-d3-components 包的 D3 水平条形图

我正在使用react-d3-componentsD3 图表。我成功地生成了条形图。但我的要求是生成水平条形图

在此处输入图像描述

我需要输出水平条形图。

在此处输入图像描述

0 投票
1 回答
769 浏览

reactjs - 使用 d3 v3 而不是 d3 v4 react js

我正在使用以下方法导入 d3 库:

但它给了我这个错误:

原因是,代码使用的是 d3 v3,而我正在导入 d3 v4。如何将其限制为使用 d3 v3 代替?在 package.json 中,d3 版本如下所示: