Hierarchical Edge Bundling d3 v4 -最简单的2节点示例

// 创建一个SVG画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建节点数据
var nodes = [
  { id: 0, name: "Node 1" },
  { id: 1, name: "Node 2" }
];

// 创建边数据
var links = [
  { source: 0, target: 1 }
];

// 创建一个力导向图布局
var simulation = d3.forceSimulation(nodes)
  .force("charge", d3.forceManyBody().strength(-100))
  .force("link", d3.forceLink(links).distance(100))
  .force("center", d3.forceCenter(250, 250));

// 创建边的路径生成器
var link = svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", d3.linkHorizontal()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; }));

// 创建节点的圆形表示
var node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 20);

// 更新节点和边的位置
simulation.on("tick", function() {
  link.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.source.x; })
    .y(function(d) { return d.source.y; }));

  node.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
});