d3.js 相关问题

如何使用 D3.js 以编程方式创建的数据绘制图表

我正在开发一个应用程序，其中数据集具有以编程方式生成的名称，并且经常由用户创建和销毁。我想使用 D3.js 在应用程序中绘制这些数据集的图表

如何使用 D3.js 为 Javascript 地图对象中的每个组绘制单独的线

我有一个名为 graphData 的数据集，其中包含三个值：波长、幅度和名称。 让数组= [ {名称：“数据集1”，波长：2，幅度：20} {名称：“数据集1”，wavelen...

如何在不使用变换旋转的情况下从下到上书写垂直文本？

使用书写模式，您只能从上到下阅读文本。根据 https://developer.mozilla.org/en/docs/Web/CSS/writing-mode 我唯一的选择是使用侧面。但这

React-d3-tree 缩放和拖动在 Next.js 13 上不起作用

我正在开发一个 Next.js 13 项目，使用react-d3-tree 库来渲染树结构。我已将缩放和拖动属性添加到我的树组件中，但我遇到了一个问题...

从networkd3 sankey图中提取结果

我是新来的，这是我第二次发帖，因为之前的帖子被删除了，我不知道问题是什么，如果你能在删除po之前说明原因就太好了。 ..

D3 多线图表显示 1 条线而不是 3 条

我正在使用 D3v7 创建 3 线图表，但只显示 1 个。我不明白为什么。 这是我的数据集： 电流输出： 看看我下面的代码： // 设置 SVG var svg = d3.select("身体...

如何从图表库中删除出现在饼图扇区上的蓝色矩形？

当单击图表库中饼图中的扇区时，我希望不出现蓝色矩形。 React 应用程序中正在使用 recharts 库。 当单击图表库中饼图中的某个扇区时，我希望不出现蓝色矩形。 React 应用程序中正在使用 recharts 库。 <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}> <Pie data={data} cx={120} cy={200} innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5} dataKey="value" > <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} /> {data.map((entry, index) => ( <Cell stroke="5" style={{ filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}` }} key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> <Pie data={data} cx={420} cy={200} startAngle={180} endAngle={0} innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5} dataKey="value" > {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> </PieChart> 您应该将 outline: none 添加到图表元素 <PieChart width={800} height={400} onMouseEnter={this.onPieEnter}> <Pie data={data} cx={120} cy={200} innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5} dataKey="value" > <Tooltip cursor={{ stroke: "red", strokeWidth: 2 }} /> {data.map((entry, index) => ( <Cell stroke="5" style={{ filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`, outline: "none", }} key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> <Pie data={data} cx={420} cy={200} startAngle={180} endAngle={0} innerRadius={60} outerRadius={80} fill="#8884d8" paddingAngle={5} dataKey="value" > {data.map((entry, index) => ( <Cell style={{ outline: "none" }} key={`cell-${index}`} fill={COLORS[index % COLORS.length]} /> ))} </Pie> </PieChart>; 您可以在 outline: none 组件中添加 <Pie/> <Pie ... style={{outline: 'none'}} />

d3.scaleOrdinal 不是函数

我正在尝试运行取自此 GitHub 的旭日图。 ...</desc> <question vote="0"> <p>我正在尝试运行取自此 <a href="https://github.com/vasturiano/sunburst-chart/blob/master/example/flare/index.html" rel="nofollow noreferrer">GitHub</a> 的旭日图。</p> <pre><code> &lt;head&gt; &lt;script src=&#34;//unpkg.com/d3&#34;&gt;&lt;/script&gt; &lt;script src=&#34;http://d3js.org/d3.v3.min.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;//unpkg.com/sunburst-chart&#34;&gt;&lt;/script&gt; &lt;!--&lt;script src=&#34;../../dist/sunburst-chart.js&#34;&gt;&lt;/script&gt;--&gt; &lt;style&gt;body { margin: 0 }&lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;chart&#34;&gt;&lt;/div&gt; &lt;script&gt; const color = d3.scaleOrdinal(d3.schemePaired); fetch(&#39;flare.json&#39;).then(res =&gt; res.json()).then(data =&gt; { Sunburst() .data(data) .label(&#39;name&#39;) .size(&#39;size&#39;) .color((d, parent) =&gt; color(parent ? parent.data.name : null)) .tooltipContent((d, node) =&gt; `Size: &lt;i&gt;${node.value}&lt;/i&gt;`) (document.getElementById(&#39;chart&#39;)); }); &lt;/script&gt; &lt;/body&gt; </code></pre> <p>但是，我使用的是 d3 库的版本 3，因为我的界面的其他组件可以使用该版本。</p> <p>我收到以下错误：</p> <pre><code>Uncaught TypeError: d3.scaleOrdinal is not a function </code></pre> <p>有人知道我该如何解决这个问题吗？</p> <p>我尝试使用：</p> <pre><code>const color = d3.scale.ordinal(d3.schemePaired); </code></pre> <p>按照建议<a href="https://stackoverflow.com/questions/61983478/uncaught-typeerror-d3-scaleordinal-is-not-a-function">这里</a>，但 d3 无法正确设置我的旭日的颜色，因为它将所有切片的颜色设置为黑色。</p> </question> <answer tick="false" vote="0"> <p>d3.schemePaired 是 D3.js 中预定义的配色方案，提供一组 12 种颜色，即使成对查看也能区分。此配色方案是在 D3.js 版本 4 中引入的，通常用于分类数据。</p> <p>如果您使用的是 D3.js 版本 3 (d3.v3.js)，则 d3.schemePaired 将不可用，因为它是在版本 4 中引入的。在 D3.js 版本 3 中，您通常会定义自己的颜色扩展或使用其他预定义方案（如果可用）。</p> <pre><code> // Define a color scale using d3.scale.category10() var colorScale = d3.scale.category10(); // Example data categories var categories = [&#34;Category1&#34;, &#34;Category2&#34;, &#34;Category3&#34;, &#34;Category4&#34;, &#34;Category5&#34;]; </code></pre> </answer> </body></html>

D3.js v4：放大气泡图

我有这个气泡图，想要放大以便能够看到非常小的气泡。我尝试了 Mike Bostock 的这段代码，但我没有成功获得良好的缩放功能，我认为这是因为......

如何使用 html2canvas 和正确的自定义字体将 D3 图表导出为 png？

我在 Vue 3 中用 D3.js 编写了几个图表组件，并且有一个单独的组件，它是一个使用 html2canvas 将单个图表导出为 PNG 的按钮。导出工作正常，但我...

仅顶角为圆角的圆环图

我花了几个小时尝试用 D3.js 完成以下图表： 按照默认示例很容易获得类似的结果，并得到如下所示的结果： 问题...

D3世界地图，部分国家质心偏离

嗨，我正在创建 React 应用程序，我试图在其中使用 D3 制作世界地图。我希望当用户将鼠标悬停在特定国家/地区时，该国家/地区路径的质心上会出现圆圈，但对于某些国家/地区，例如 &

如何在 vega lite 饼图中使用字段值作为颜色值？

我发现了这个饼图 vega lite 可视化： { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", “description”：“一个简单的饼图......

如何导入 JSON 文件以保存在 javascript 变量中[重复]

我花了几个小时寻找一个 JavaScript 变量来保存导入的 JSON 对象中的数据。我找不到任何可以帮助我解决这个问题的东西。每次出海...

d3轴标注

如何向 d3 中的轴添加文本标签？ 例如，我有一个带有 x 轴和 y 轴的简单线图。 在我的 x 轴上，我有从 1 到 10 的刻度。我希望“天”这个词出现在它的下面，所以 p...

使用复选框在 d3.js 多线图表中添加或删除线条

我正在使用 d3 创建多线图表。我在与一行相对应的每个图例条目中添加了一个复选框，其想法是可以取消选中一个框来删除该行，然后重新选中一个框来添加它...

尝试在带有 deno 内核的 jupyter 中导入skia_canvas 失败

我正在尝试 Deno Jupyter 内核集成。 我的具体目标是使用 D3 在 Jupyter 笔记本中绘制一些数据。 我的设置是： 来自 Docker Hub 的 Deno docker 镜像： denoland/deno:ubunt...

为什么我所有的 d3 bl.ocks 从 bl.ocks.org 中消失了？

我刚刚添加了一个新的 d3 块，发现所有图形都从我现有的块中消失了：https://bl.ocks.org/emmasaunders。文本和代码仍然存在，但图形不存在......

开玩笑，使用 d3 时出现意外的令牌“导出”

我读过很多与我类似的问题，但似乎没有一个能解决我的问题。我正在使用 Vue3、TypeScript、Jest 和 D3 v7。当我尝试从“d3”导入 * 作为 d3 时；我收到此错误...

D3 图表中未绘制区域的自定义颜色（角度）

我想为 d3 图表中的拉丝部分应用一些颜色，为非拉丝区域应用一些颜色。 常量画笔 = d3.brush() .extent([[0, 0], [宽度, 高度]]) .on('开始', Brushstart) .on('结束',