问题标签 [chord-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.
javascript - 使用 JavaScript/d3.js 有效地将表格数据(对象数组)转换为方阵
我有一个与将数据从一种形式转换为另一种形式相关的编程问题。
我有一个对象数组,表示需要将其转换为矩阵以进行可视化的数据表。我在教育期间以某种方式避免涉及矩阵数学,所以如果我的术语不正确,我深表歉意。
更具体地说,我有一个表示格式化数据的对象数组:
我需要把它变成一个方阵以用于和弦图,例如:
结果矩阵的长度/宽度 n 等于数组中唯一个体的数量(Harry、Serge 等),相应单元格中的值 (x, y) 是人 x 戳人 y 的次数. pokes 数组中的每个对象都代表一个 poke(“type”属性不影响矩阵的构造)。
因此,例如,对象:
将向代表 (Brin, Serge) 的单元格加 1。
这是我的伪代码方法:
我还没有进入真正的代码,因为我不确定这个方法是:
- 正确的
- 高效/快速,尤其是当 pokes.length 接近数千时
任何意见,将不胜感激; 特别是如果 d3.js 有一个隐藏的方法来创建我没有发现的矩阵。
d3.js - 不受欢迎的 D3 和弦图链接扭曲
我注意到在一些和弦图中,两个节点之间的链接有一个“扭曲”。
例如,看看http://bl.ocks.org/mbostock/1046712,在 data.converters 和数据节点之间,或者在 scale 和 util 之间。
或者更突出的是,在http://bl.ocks.org/mbostock/4062006中,在黄色和棕色节点之间。
我已经在一些相邻节点之间用我自己的和弦图看到了这一点。我怎样才能摆脱这种扭曲?
d3.js - d3.js Add labels in Chord diagram
I am new to this kind of chord visualization. I am working on a sample http://bl.ocks.org/mbostock/4062006:
I would like to add "black", "blonde","brown","red" as labels in the respective chord. How is this possible.
I tried something like this but is not working:
svg - 在 d3 中设置一个隐藏所有其他元素的点击事件
我对使用 d3 相当陌生,但我想做的是制作一些网站流量的和弦图,并且我试图通过在用户单击某个组时更改路径的颜色来使其具有交互性site.here 是我的代码的样式和脚本部分:
任何帮助将不胜感激
http://jsfiddle.net/Rw3aK/2/是脚本的jsFiddle,不知道如何让它从文件中读取,所以这里是data2.csv的内容:
siteid1,siteid2,count,pubid1,pubid2
8,94,11132,57141,57141
201,94,10035,57141,57141
201,8,9873,57141,57141
0,94,8488,45020,57141
0,8,8258,45020,57141
0,201,7644,45020,57141
0,1,6973,45020,45020
94,1,5719,57141,45020
8,1,5670,57141,45020
1,201,5410,57141,45020
d3.js - 多值D3和弦图
我是 d3 的新手,正在尝试制作和弦图。
但是我只能用四个阵列来制作它,我怎样才能让它达到 10 个呢?我正在查看 d3 的另一个示例,但我仍然无法理解它。
你能解释一下地图功能是如何工作的吗?
d3.js - 产生平行丝带的d3和弦图
我目前正在使用和弦布局,但我想让我的和弦平行(用红色覆盖图说明)。
我该如何做到这一点?我尝试了不同的排序选项,但似乎都没有产生预期的结果。
代码:
d3.js - D3 和弦图 - 选择单个和弦
我正在使用和弦图,现在我只能选择和弦连接的文本标签和灰色边框。
我想选择单个和弦但是,当我添加鼠标功能时,它会在图表中选择一个随机的。
javascript - 使用 D3 在和弦图中更改和转换数据集
我正在使用 D3 制作和弦图。
我正在尝试这样做,以便当用户单击链接时,数据集将更改为另一个预定义的数据集。我查看了http://exposedata.com/tutorial/chord/latest.html和http://fleetinbeing.net/d3e/chord.html,并尝试使用其中的一些元素来让它工作.
这是创建“默认”图表的 JavaScript:
这就是我正在尝试做的事情,以使其使用新数据重新渲染图表(有一个带有id
“女性”的图像元素。
javascript - 使用动画在 D3 可视化中添加和删除元素
长时间用户第一次在这里提出问题(我第一次无法使用我搜索的答案解决问题)。我用自己的数据在 JS D3 中重新创建了 uber 和弦图。我的实现可以在这里找到,尽管该地址可能不会永远保持良好,所以这里是代码(请原谅整个过程中的一些错位):
这很好用,而且功能齐全。它显示了从 2012 年秋季到 2013 年秋季大学之间的学生流动(我打算在屏幕上进行更好的解释)。我的下一步是使这个可钻。因此,例如,如果您单击一所大学,我想将该大学扩展到其部门,并显示各个部门之间的和弦以及“其他”,这将是所有其他大学的组合。此外,您将能够以相同的方式深入部门以获取主要级别的详细信息。我拥有执行此操作所需的所有原始数据,并且我相当有信心知道如何在单击组时使用它来动态创建新矩阵。
我的问题是,如果我每次都将当前可视化转储为带有新数据的新可视化,那么执行我上面描述的所有操作都相当简单,但这将是一个艰难的过渡。我更喜欢这样的动画。但是,该示例仅适用于您的矩阵在转换的每一端都具有相同大小的情况。由于我想深入研究这些数据,这对我来说并不总是正确的。我可以拥有比以前更少或更多的组/和弦。我的问题是,如果我创建一个新的和弦布局,其矩阵比当前屏幕上的矩阵更大/更小,我能以某种方式平滑地为新的/不需要的组/和弦设置动画吗?如果是这样,我将如何解决这个问题,是否有任何例子?
我对 D3 还很陌生,但我正在努力快速学习,因为这里对这些类型的可视化有大量需求。如果有关于此的教程可以随意简单地链接它,我已经断断续续地研究了几天,但没有找到任何令人满意的解释如何在 d3 布局中平滑添加/删除元素。