对将弦数据绑定到色带路径感到困惑
Confused about binding chord data to ribbon path
在引用这个和弦图示例时:https://bl.ocks.org/mbostock/4062006
下面的代码块设置功能区:
var ribbon = d3.ribbon()
.radius(innerRadius);
但是随后在代码中ribbon
以一种我无法理解的方式使用:
g.append("g")
.attr("class", "ribbons")
.selectAll("path")
.data(function(chords) { return chords; })
.enter().append("path")
.attr("d", ribbon)
.style("fill", function(d) { return color(d.target.index); })
.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); });
.attr("d", ribbon)
如何知道如何将和弦数据传递给ribbon?这只是D3魔法的一部分,我需要记住吗?
在您的示例中,d3.chord()
计算数据的布局。值得注意的是,在d3中,"布局"与数据可视化中的布局有着不同的含义:在这里,布局与准备数据以创建给定的图表(而不是图表的视觉"布局")有关。
基本上,d3.chord()
采用您的数据矩阵并创建另一个具有一堆起始角度和结束角度的数据矩阵,将源与目标相关联。
d3.chord()
修改后的数据传递给d3.ribbon()
。d3.ribbon
是真正的路径生成器,它创建将在SVG中绘制的实际路径。它是如何知道数据的?您之前已经将修改的数据绑定到您的组:
.datum(chord(matrix));
这是传递给d3.ribbon()
的数据。
根据API, d3.ribbon()
…
…为给定参数生成一个功能区。这些论点是武断的;它们只是与this对象一起传播到功能区生成器的访问器函数[…]使用默认设置,需要一个chord对象。
相关文章:
- Javascript:使用绝对路径设置img src
- 如何在d3.js中返回路径的y坐标
- 复制图像路径以单击它
- 从模块内部访问Express装载路径
- JS文件的路径正在消失
- 使用onclick绘制SVG路径
- jpm的默认Firefox路径没有'不起作用
- 如何使用jquery将base64图像路径转换为真实路径
- 可以用'吗/'在相对路径中
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 将Windows文件路径组织到文件夹中
- Ajax URL路径未替换当前URL
- 如何使用Javascript上传给定路径的文件
- 如何将要单独填充的每个HTML画布路径/形状分开
- 请求准备一个文件并返回路径,允许用户在准备好时下载
- 动态路径用于流星/铁路由器
- 在ng中给出文件路径包括什么
- react路由器使用简单的javascript路由器配置来处理不匹配的路径
- 如何设置SVG路径的样式以拍摄图像
- 对将弦数据绑定到色带路径感到困惑