问题标签 [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.
d3.js - 双层 D3 分区/旭日形布局上的标签
我正在尝试将标签添加到此处显示的双层旭日形/分区 - http://bl.ocks.org/mbostock/5944371:
我已将标签添加到前 2 个级别并正确旋转它们。但是我现在不能在过渡期间添加新级别的标签。为了开始,我已经把......
紧接着...
行,但它会引发以下错误...
我究竟做错了什么?
svg - 森伯斯特图智能文字换行
我有一个基于伟大的 d3“咖啡轮”示例的可缩放旭日形图:
在该示例中,有一个简单的文本换行代码,它在标签中搜索空格并将文本换行在第一个空格字符处:
此代码工作正常,但它非常基本,特别是如果整个标签将适合可用的 sunbust 段中的一行(或者是因为特定的标签很短,或者由于 sunburst 被缩放,可用空间足够大) . 在密集包装的旭日形中,不必要地包裹标签会导致图表看起来凌乱/杂乱。
我想让文本处理更加智能,并将标签的长度与可用空间进行比较(注意段的“宽度”根据缩放时可见段的深度而变化)。
此外,如果标签的可用空间已知,则文本换行可能更智能,例如,如果标签包含两个以上的单词,代码可以决定是在第一个空格还是第二个空格更好。
如果有人已经解决了这个问题并有一些例子,如果可以分享,将不胜感激。或者,如果有人对如何将标签的长度与不断变化的可用空间进行比较有任何想法?
javascript - 当节点太小时,如何隐藏 d3 中的文本标签?
我正在创建与此示例类似的可缩放旭日形。问题是我的 sunburst 中有很多数据,所以文本标签混合在一起,难以阅读。因此,我想在标签太小时隐藏标签,就像在这个d3.partition.layout示例中一样。我该如何实现这个功能?
javascript - 是否可以使用 d3.js 库将包布局(圆圈)与分区布局(旭日形)结合起来?
我正在尝试在使用 Sunburst 分区布局制作的分区中对圆圈进行分组,这些圆圈是 json 文件中可视化的槽包布局(气泡图)。到目前为止,我无法使其在各种尝试中发挥作用。但是,如果不可能,那么通过包布局可视化的对圆圈进行分组的最相似方式或任何方式是什么?
我也尝试用力布局对它们进行分组,但是当我使用碰撞功能时,圆圈会跳跃大约 30 秒。有什么建议,谢谢:)
这也是我想要的东西:(虽然它不是旭日形隔断)
javascript - 如何向 d3.layout.partition 示例添加工具助手?
我正在尝试添加一个工具助手,更具体地说是这个到d3.layout.partition 示例。关键是当您将鼠标悬停在一个矩形(即树中的一个元素)上时,工具栏会显示有关该部分的信息。我以前能够使工具栏出现在sunburst 示例中,如下所示:
但是...当我尝试类似于分区示例的操作时:
工具栏不显示。如何调整它以使其也适用于分区布局?
当我尝试将鼠标悬停在矩形上时,我在 Web 控制台中收到的错误消息如下:
javascript - 在 D3 中的双层分区中缩放
我正在尝试使 D3 中的双级分区与对数刻度一起使用。
但是,它似乎无法正常工作。
我已经为角度指定了一个对数刻度:
但是,这仅适用于在缩放时重新计算角度的情况。
我曾尝试修改原始分区比例,但没有成功。
任何提示表示赞赏。请参阅下面链接中的示例代码。
javascript - D3“Sunburst”中心路径大小
所以我有一个非常标准的 D3“Sunburst”图。但是,中心路径(即根)太大。它占据了我图表的很大一部分,因为围绕它的更重要的弧线争夺空间而被浪费了。
我即将在外环上添加标签,但我需要更多空间。
见下文。
我想让中心圆(浅灰色位)更小,外圈更厚。
谁能帮我?
这是我的代码:
javascript - 为什么添加标签会减慢 d3 可缩放 Sunburst 的速度?
我正在扩展 d3 可缩放 Sunburst,特别是Coffee Flavor Wheel:
...具有相对较大的数据集(大约 1200 个节点)。我添加了这样的标签:
在 click(d) 函数中:
问题是当我添加此功能时,整个 Sunburst 加载速度非常缓慢,并且点击转换根本不会非常平滑地交换。如何优化此代码以使其加载更快?
更新:
我设法通过从Coffee Flavor Wheel更改为Zoomable Sunburst with Labels示例解决了这个问题。我不完全确定为什么另一个让它更快。我怀疑它与 attrTween 和Zoomable Sunburst with Labels中的过渡使它更合适。
java - 使用父 ID 将 CVS 解析为 JSON 树
我在解析我的大(~100K 行)CVS 文件时遇到问题:
……
其中 id=1 - 根。
parent_id1 -> 最近的父母,parent_id2 -> 下一个父母等等。
想要像这里一样用失真绘制 Sunburst http://bl.ocks.org/mbostock/1306365
JSON树示例http://bl.ocks.org/mbostock/raw/1306365/bfecc11c6d2690499430813141824cd788a37728/readme.json
我可以使用具有所有父子依赖项的 JAVA 创建 JSON 树吗?或者我应该只使用 D3 库?
提前致谢!
json - 尝试创建 d3 sunburst 可视化的问题
首先,很抱歉,因为我是新手。我一直在尝试修改出现在此处的 Kerryrodden 的旭日形:
http://bl.ocks.org/kerryrodden/7090426
我正在尝试修改代码以使用 .json 文件而不是 .csv 文件。我认为这将是直截了当的,但我遇到了问题。下面附上我创建的 .js 文件和 .json 文件。
任何有关这些的帮助将不胜感激
问候
序列.js
队列2.json