数据形态 A:邻接矩阵(n×n 方阵)         数据形态 B:node-link 列表
  matrix[i][j] = i→j 的流量(0 表示无边)   [{source, target, value}, …]
        │ 可互换(matrixToLinks/linksToMatrix) │
        ▼                                   ▼
  ├─ 邻接热图(自写 layout)                ├─ 弧线图(network-utils 的 arcDiagram)
  ├─ 弦图(d3.chord)                       └─ 桑基图(d3-sankey,只吃 DAG)
  └─ 简单 chord(自定义)

  选型主轴:双向关系 → 弦图;单向流程(可分可合不可回环)→ 桑基;
  交叉多的密网 → 矩阵热图;小而顺序的网络 → 弧线图。

  const matrix = [ [0,6,2,0,0],
                   [8,0,5,0,0],
                   [0,1,0,0,0],
                   [0,1,0,0,1],
                   [0,0,0,0,0] ];
  const labels = ['A','B','C','D','E'];

  const edges = [ {source:0, target:1, value:6},
                  {source:0, target:2, value:2},
                  {source:1, target:0, value:8}, … ];   // 只有 7 条非零边
  const nodes = [{label:'A'}, …, {label:'E'}];

  // 互换工具(仓库 js/network-utils.js 有完整版):
  function matrixToLinks(matrix) { … }   // 矩阵 → 列表(摊平双循环,滤 0)
  function linksToMatrix(nodes, links) { … }  // 列表 → 矩阵(填空阵,填值)

  function adjacencyMatrix() {
    let w = 1, h = 1;
    function layout(nodes, sourceMatrix) {
      const cellW = w / nodes.length, cellH = h / nodes.length;
      return sourceMatrix.flatMap((row, r) => row.map((value, c) => {
        const rect = { x: c*cellW, y: r*cellH, w: cellW, h: cellH };
        return value > 0 ? {…rect, source: nodes[r], target: nodes[c], value} : rect;
      }));
    }
    layout.size = function(array) { … return layout; }
    return layout;
  }

  const data = adjacencyMatrix().size([700,500])(labels, matrix);
  // 25 个格子对象:有值的带 source/target/value,没值的纯白底

  const chord = d3.chord().padAngle(.3);     // padAngle:组间留缝(弧度)
  const chords = chord(matrix);              // chords: 14 条丝带;chords.groups: 9 段弧

  // chords[i] = {source: {index, subindex, value, startAngle, endAngle}, target: {…}}
  // groups[i] = {index, value, startAngle, endAngle}

  const ribbon = d3.ribbon().radius(700);
  chart.selectAll('path.ribbon').data(chords).join("path")
    .attr("d", ribbon).style("opacity", .3)
    .style("fill", d => color(d.source.index));

  const arc = d3.arc().innerRadius(radius+2).outerRadius(radius+30);
  chart.selectAll('path.arc').data(chords.groups).join("path")
    .attr("d", arc).style("fill", d => color(d.index));

  import * as d3_all from "https://cdn.skypack.dev/d3@7.9.0";  // CDN 链接(查阅于 2026-10-19)
  import * as d3_sankey from "https://cdn.skypack.dev/d3-sankey@0.12.3";  // CDN 链接(查阅于 2026-10-19)
  const d3 = Object.assign({}, d3_all, d3_sankey);

  const sankey = d3.sankey().nodePadding(50).nodeWidth(30)
                    .extent([[50,50],[600,400]]).iterations(100);
  const graph = sankey({nodes, links});
  // 节点得到:x0,x1,y0,y1(宽 nodeWidth、高由流量算)、depth、sourceLinks/targetLinks、value
  // 连边得到:y0,y1、width(流带厚度)

  chart.selectAll("path.link").data(graph.links).join("path")
    .attr("d", d3.sankeyLinkHorizontal())     // 横向流带生成器
    .style("stroke-width", d => d.width);