问题标签 [sunburst-diagram]

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 回答
5162 浏览

javascript - 寻找一种在旭日形图上显示标签的方法(找不到工作示例)

感谢某人的帮助(Brandon),我已经能够向旭日形图添加工具提示。我仍在寻找一种在旭日图上显示路径标签的方法(然后使用双模式工具提示+文本)。

我想改进的示例在 jsfiddle.net/trakkasure/UPqX5/ 上提供

我正在寻找要添加到以下代码部分的代码:

我希望看到http://bl.ocks.org/910126上提供的示例中显示的标签。我无法让该示例为我工作(我还是 D3 的新手)

我确实认识到该图表上可能有太多文本,但在我的情况下这不是问题。

有人可以帮助我了解如何在图表上显示所有这些标签吗?

0 投票
1 回答
2854 浏览

javascript - 无法使标签在可缩放的 d3 sunburst 上工作

现在摆弄了几个小时后,我仍然无法在我的 D3 Sunburst 布局中制作标签。这是它的样子:

http://codepen.io/anon/pen/BcqFu

在此处输入图像描述

我尝试了几种可以在网上找到的方法,这是我尝试过的示例列表,不幸的是,我都失败了:

[由于新用户限制,无法发布链接列表]

当然还有咖啡风味轮:http ://www.jasondavies.com/coffee-wheel/

目前我用标题标签填充切片,只是在将鼠标悬停在元素上时才显示它。为此,我正在使用以下代码:

有没有类似的东西可以用来显示切片中的批号?

--

更多信息:Jason Davies 使用此代码选择和添加文本节点:

虽然他的轮子的选择返回了 97 个结果(等于路径标签的数量),但我只得到一个,因此只能显示一个标签(中间的那个)

0 投票
0 回答
911 浏览

javascript - 使用 D3.js 重现 Protovis Sunburst 标签

我正在将旧的 Rails/Protovis 站点迁移到 Django 和 D3.js。我使用了 Protovis sunburst 的修改版本(http://mbostock.github.com/protovis/ex/sunburst.html——我的代码参见http://www.eafsd.org/assignments_sunbursts)并且想重新创建这在 D3.js 中使用 sunburst 示例(http://bl.ocks.org/4063423)作为基线,但我遇到了在弧上附加标签的墙壁。

我查看了其他几个 SO 问题,包括在圆弧 d3js 内对齐文本寻找在旭日形图上显示标签的方法(找不到工作示例),但我似乎无法使文本路径正常工作。如果可能的话,最好让标签呈放射状显示,因为我正在显示的文本(18 世纪的外交头衔)可能会变得很长。

我已经尝试了示例中的以下代码:

旭日形显示和标题显示在鼠标悬停(虽然内环没有尺寸功能,所以它返回为未定义)。

我正在尝试进行另外两个修改:我找不到显示如何递归计算包大小的 D3js 片段,以便内部节点可以显示其关联叶子的总大小。

最后,我不知道如何添加自己的颜色范围。

我真的很感谢你的时间。非常感谢。

0 投票
1 回答
8251 浏览

javascript - 如何在 D3 旭日形图中正确旋转文本标签

在以下 D3 旭日形首饰:

http://jsfiddle.net/maxl/eabFC/

左象限中的标签是颠倒的,我想对它们进行旋转,以便文本从左到右读取。

变换应仅适用于从大约 100 度到 270 度的弧。

0 投票
1 回答
1548 浏览

javascript - 无法旋转文本d3js

我正在尝试将文本添加到partition-sunburst 示例。我遵循了 Google Group 上给出的提示,并且能够添加文本。现在我想旋转它。新的角度似乎是正确的,但所有的文字都集中在一个点上。

这是我添加和旋转文本的一段代码:

这是我得到的图像:

在此处输入图像描述

这是完整的脚本:

0 投票
2 回答
6446 浏览

javascript - 编辑 D3 Sunburst 可视化的 innerRadius

如何更改 Sunburst 可视化最内圈的半径?请参阅以下示例:(http://bl.ocks.org/d/910126/ - 注意中心区域有多大;可以更小吗?)

在此处输入图像描述

此外,是否可以为 Sunburst 中的所有图层定义不同的高度?

0 投票
2 回答
5267 浏览

d3.js - 如何使用 d3.js 获取 sunburst 示例中每个弧的 startAngle 和 endAngle?

我想在朝阳示例中获取每个弧的开始和结束角度,如http://bl.ocks.org/4063423

在此处输入图像描述

0 投票
1 回答
1025 浏览

javascript - d3.js 是否支持动态 Sunbursts

我想创建一个功能的混搭,如从

http://bl.ocks.org/4063423http://philogb.github.com/jit/static/v20/Jit/Examples/Sunburst/example2.html

我想使用 d3.js 或至少一个纯 javascript 解决方案,但该解决方案将响应鼠标单击以显示有关所选部分的更多信息。

放大和缩小不是强制性的,但如果我能做到,那就太好了。

现在我的问题是,是否有一个框架可以支持这一点,还是我必须自己将它们混合起来。

免责声明:谷歌并没有那么有帮助!

0 投票
1 回答
2892 浏览

d3.js - 如何将文本添加到 D3 旭日形图的中心

我正在使用可缩放的旭日形首饰示例,但我正在努力尝试将文本添加到图表的中心并使其仍可缩放。这个想法是,当我单击指示其长度的某个弧时,中心的文本会发生变化。似乎 mouseclick 和 mouseover 的属性消失了。这是我尝试过的:

有人可以帮助我了解如何在图表中心显示文本而不丢失点击功能吗?

也许更简单的方法是选择代表圆形中心的“g”,并在图表显示后向其添加文本。我已经尝试过了,但我无法成功地选择这个元素(对不起,我是 D3 的新手),所以回到第一格。

0 投票
1 回答
1760 浏览

javascript - 如何在过渡中移动文本标签

我是 D3 的新手,我正在尝试扩展http://bl.ocks.org/mbostock/4063423中的 sunburst 示例,只是为每个弧添加文本标签。对于静态图表来说很容易,并且在此代码中标签的位置正确,但是当我添加与调整弧线大小的示例相同的转换时,文本标签不会移动。

我怎样才能实现标签移动,只是用相应的弧移动?

问候,琼