Javascript D3.js-重叠箭头

我正在尝试调整代码

提供工作流状态

这是小提琴

var links = [{
    source: "Start",
    target: "Dept Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Dept Approver",
    target: "Amount>20",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Div Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Section Approver",
    type: "approve",
    staus: "completed"
}, {
    source: "Amount>20",
    target: "Dept Approver",
    type: "reject",
    staus: "completed"
}, {
    source: "Div Approver",
    target: "End",
    type: "approve",
    staus: "dormant"
}, {
    source: "Section Approver",
    target: "End",
    type: "approve",
    staus: "pending"
}];


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(80)
    .charge(-300)
    .on("tick", function (d) {
    path.attr("d", function (d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = 0;
        return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });
    circle.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
    text.attr("transform", function (d) {
        return "translate(" + d.x + "," + d.y + ")";
    });
})
    .start();

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
    .data(["approve", "reject"])
    .enter().append("marker")
    .attr("id", function (d) {
    return d;
})
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .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", 8)
    .call(force.drag);

var text = svg.append("g").selectAll("text")
    .data(force.nodes())
    .enter().append("text")
    .attr("x", ".40em")
    .attr("y", 12)
    .text(function (d) {
    return d.name;
});

var drag = force.drag()
    .on("dragstart", function (d) {
    d3.select(this).classed("fixed", d.fixed = true);
});

.link{
填充：无；
行程：#666；
笔划宽度：1.5px；
}
#许可证{
填充：绿色；
}
.link.licensing{
笔画：绿色；
}
.link.拒绝{
笔划数组：0,2 1；
笔画：红色；
}
圈{
填充：#ccc；
冲程：#333；
笔划宽度：1.5px；
}
正文{
字体：11px无衬线；
指针事件：无；
文本阴影：01px0#fff，1px0#fff，0-1px0#fff，-1px0#fff；
}
.固定{
/*填写：#00B2EE*/
}

我已将圆弧改为直线。然而，这有一个问题。如果从NodeA到NodeB，然后从NodeB到NodeA有一个连接器（拒绝，以红色突出显示），则两条线重叠

我想知道是否有一个聪明的方法来管理这一点，例如，拒绝线（红色的）距离另一条线只有几个像素，这样它们就不会重叠

谢谢诸位

诸如此类：

path.attr("d", function(d) {
  var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = 0;
  var yFudge = d.type === "reject" ? 5 : 0;
  return "M" + d.source.x + "," + (d.source.y + yFudge) + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + (d.target.y + yFudge);
});

---

更新。

谢谢。本例使用圆弧，但我需要使用直线。不过，对于具有两条直线的节点，使用圆弧也可以。但是，所有其他节点都需要有直线连接器。另外，两个节点之间的连接器不会超过两个。有没有办法将箭头也改为红色