具有相同方向的多个链接的d3网络

Question

我正在尝试更改“移动专利诉讼”示例，以允许一个方向上的多个链接。

我有数据（是的，我知道Jim实际上不是Pam的老板）：

source          target          relationship          
Michael Scott   Jan Levenson    pro
Jan Levenson    Michael Scott   personal
Jim Halpert     Pam Beasley     pro
Jim Halpert     Pam Beasley     personal

美孚专利诉讼示例的多路径功能允许正确显示前两行（两个弧线）。 但是，最后两行仅显示一个混合弧。

问题：如何允许具有相同方向性的链接显示为多个弧而不是单个弧？

这是我的弧码（直接从“移动专利示例”中翻录）：

function tick() {
  path.attr("d", linkArc);
  circle.attr("transform", transform);
  text.attr("transform", transform);
}

function linkArc(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

function transform(d) {
  return "translate(" + d.x + "," + d.y + ")";
}

任何帮助将不胜感激。 谢谢！

Answer 1

可能有一些潜在的方法，很快就会想到：对节点之间的每种类型关系使用不同的路径生成器。 您必须具有一个指示关系性质的属性（您在问题中所具有的属性），然后使用该属性来设置路径对齐方式。

在下面的代码段中，我检查一下正在绘制什么关系，并将个人关系中的弧形半径与专业关系中的弧形半径相比减小了50％。 相关部分是：

function linkArc(d) {

  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  if(d.relationship == "pro") { 
     return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  }
  else {
    return "M" + d.source.x + "," + d.source.y + "A" + (dr * 0.3) + "," + (dr * 0.3) + " 0 0,1 " + d.target.x + "," + d.target.y;
  }
}

这是实践中的全部内容：

 var links = [ { source: "Michael Scott", target:"Jan Levenson", relationship: "pro" }, { source:"Jan Levenson", target:"Michael Scott", relationship: "Personal" }, { source: "Jim Halpert", target: "Pam Beasley", relationship: "pro" }, { source: "Jim Halpert", target: "Pam Beasley", relationship: "Personal" } ] var nodes = {}; // Compute the distinct nodes from the links. links.forEach(function(link) { link.source = nodes[link.source] || (nodes[link.source] = {name: link.source}); link.target = nodes[link.target] || (nodes[link.target] = {name: link.target}); }); var width = 960, height = 500; var force = d3.layout.force() .nodes(d3.values(nodes)) .links(links) .size([width, height]) .linkDistance(60) .charge(-300) .on("tick", tick) .start(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); // Per-type markers, as they don't inherit styles. svg.append("defs").selectAll("marker") .data(["suit", "licensing", "resolved"]) .enter().append("marker") .attr("id", function(d) { return d; }) .attr("viewBox", "0 -5 10 10") .attr("refX", 15) .attr("refY", -1.5) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5"); var path = svg.append("g").selectAll("path") .data(force.links()) .enter().append("path") .attr("class", function(d) { return "link " + d.type; }) .attr("marker-end", function(d) { return "url(#" + d.type + ")"; }); var circle = svg.append("g").selectAll("circle") .data(force.nodes()) .enter().append("circle") .attr("r", 6) .call(force.drag); var text = svg.append("g").selectAll("text") .data(force.nodes()) .enter().append("text") .attr("x", 8) .attr("y", ".31em") .text(function(d) { return d.name; }); // Use elliptical arc path segments to doubly-encode directionality. function tick() { path.attr("d", linkArc); circle.attr("transform", transform); text.attr("transform", transform); } function linkArc(d) { var dx = d.target.x - d.source.x, dy = d.target.y - d.source.y, dr = Math.sqrt(dx * dx + dy * dy); if(d.relationship == "pro") { return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y; } else { return "M" + d.source.x + "," + d.source.y + "A" + (dr * 0.3) + "," + (dr * 0.3) + " 0 0,1 " + d.target.x + "," + d.target.y; } } function transform(d) { return "translate(" + dx + "," + dy + ")"; } 

 .link { fill: none; stroke: #666; stroke-width: 1.5px; } #licensing { fill: green; } .link.licensing { stroke: green; } .link.resolved { stroke-dasharray: 0,2 1; } circle { fill: #ccc; stroke: #333; stroke-width: 1.5px; } text { font: 10px sans-serif; pointer-events: none; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>