对将弦数据绑定到色带路径感到困惑

Confused about binding chord data to ribbon path

本文关键字：路径 色带 数据绑定      更新时间：2023-09-26

在引用这个和弦图示例时: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对象。

相关文章：