问题标签 [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.
json - 使用 d3 mbostock 的空白页
我对 d3 很陌生,所以请多多包涵。我遇到的问题是,在复制粘贴后,我无法理解为什么http://bl.ocks.org/mbostock/演示都不起作用。我不断得到空白或白页。我错过了什么?
我什至从https://gist.github.com/mbostock/3884955下载了 gist 源文件,但仍然无法正常工作。
任何想法都将不胜感激,因为我还需要使用其数据文件实现http://bost.ocks.org/mike/uberdata/:(1 ) http://bost.ocks.org/mike/uberdata/citites。 csv (2) http://bost.ocks.org/mike/uberdata/matrix.json
d3.js - 和弦图中的 D3 转换和更新
我正在使用 d3 和弦图来可视化来自多个 JSON 文件的一些数据。每年有一个 JSON 文件,当我选择一年(选择输入或按钮)时,应该更新数据。
我的方法是这样的:
所以我要做的是删除之前可视化的所有组和和弦,然后加载新数据。我不认为这是 d3 的方式来做到这一点。
我想做的是在可视化之间添加某种过渡。我已阅读有关更新模式(进入、更新、退出)的信息,但不知道如何使其适应我的问题。
render
函数和所有源代码都在这里(只是 JavaScript)
javascript - 使用D3和弦图的单词出现
我想使用带有 D3.js 的和弦图进行数据可视化,显示单词出现之间的关系,即将出现次数较多的单词与较少出现的单词联系起来。具体来说,我应该如何做矩阵来完成那个dataviz?
javascript - 是否可以使用 d3.js 在圆弧可视化中添加和弦或曲线?(不使用 chord.groups)
我创建了一个弧形可视化,它是一个半圆形,上面有大约 74 个路径元素,每个元素代表一个国家,它是“arcValue”(表示为每条路径的高度):
http://jsfiddle.net/developerAndADj/2DYrQ/
我希望将和弦添加到 productCount > 0 的国家/地区的可视化中。每个和弦将从每个对应的路径元素到位于弧下方的路径。
我正在尝试完成两件事:
- 显示某些国家/地区有产品数量,而其他国家/地区没有。
- 有代表这些产品数量的曲线或弦。
到目前为止,我已经能够在上面的小提琴中使用一个额外的弧线,从半圆的中心到每个路径元素,但是没有弯曲的效果。
我还设法根据每个国家/地区的产品数量创建和弦,但是,我无法让和弦与它对应的国家对齐。这是我生成绳索的代码:
这是一个演示:http: //jsfiddle.net/developerAndADj/68WRT/
是否可以将每个和弦排列到其各自的路径元素?此外,是否可以使用从每个路径元素的内半径到位于圆弧下方的路径或 SVG 中的任何指定坐标的弦或曲线?
感谢您的任何反馈!
d3.js - 在 D3 和弦图中隐藏文本元素
与此示例类似:
我有一个功能可以突出显示链接到所选组的和弦并隐藏所有不相关的和弦:
我试图扩展它,以便它不仅隐藏和弦,而且隐藏未连接到当前选定组的组的文本标签。
是否可以将这两个操作组合成一个我传递给的函数.on("mouseover",[function])
?
mobile - Bostock 的“Uber Rides by Neighborhood”和弦即和弦的鼠标悬停触发器在哪里?
伙计们-
我正在研究基于http://bost.ocks.org/mike/uberdata/的 d3.js 和弦图:
第 88 行清楚地显示了邻域“组”对象的鼠标悬停事件。
第 123-130 行显示了如何为和弦连接标题。
但是,没有鼠标悬停触发器来显示/隐藏与节点关联的 .text。
这是JS的“自动”功能吗?还是 d3.js 脚本的行为部分?
我问的原因是我需要用点击行为替换悬停行为,因为它需要在 iPad 上可用。
javascript - D3.js 和弦图 - 将鼠标悬停在弧上时显示/消失文本
我正在尝试向 Mike Bostock 创建的 Chord Diagram 添加一个小功能。当我将鼠标悬停在某个弧线上时,比如说 A 组,我想要一段放在和弦图右侧的文本来更新其文本,以解释 A 组特有的一些见解。当用户移动他的/她的鼠标远离弧/和弦(因此所有和弦再次可见),我希望文本回到它之前所说的内容(在我的情况下,这是对如何理解和弦图的简短解释)
但是,我无法使用鼠标事件功能使文本更改甚至消失。
我尝试将fade
函数最后复制到: http: //bl.ocks.org/mbostock/4062006到 a中fadeOver
,fadeOut
并将事件函数调整为
在fadeOver
函数内部,我尝试创建一段新文本,以在您将鼠标悬停在弧上并且未选择的和弦消失时显示。仅在原始功能中添加了一行fade
我添加了一段类似的代码fadeOut
但是,文本始终显示为“标准文本”。当我将鼠标悬停在和弦上时,什么也没有发生,文本似乎永远不会变成“更新的一段文本”。任何人都可以向我解释为什么不和/或帮助我如何实现我想要做的事情吗?(我希望刷新后文本为“空”,因为我尚未调用鼠标事件,但刷新后它显示“标准文本”)
我知道上面的例子最终还不是我想要的,但也许当我得到上面的工作时,我可以使用和弦索引来显示一段特定的更新文本
javascript - Fading chords in d3js chord graph
I'm a total beginner with d3js, so please be patient if my question looks dumb.
I'm trying to reproduce a chord graph like the one proposed by Mike Bostock. In the code by Bostock if you go with your mouse on an arc, all the chords that are not involved (as target as well as source) in the arc will fade.
I'd like to change it in order to let all the chords fade except the one on which there is a mouse (in order to emphasize one single two-way relationship).
I've added a fade_single
function that is triggered when the mouse is over a chord:
The fade_single
function follows:
The problem is that I don't know what to put in the commented line, i.e. to filter out all the relationship that are have not the row and column of the single chord. I've tried to play with the subindexes but the parameter i
only gives you the row, so I don't know how to isolate the chord I want to exclude from the fading.
Any idea? Any hint?
Thank you,
Elisa