Javascript 如何在force layout d3.js中动态附加箭头标记

如何在d3.js的强制布局中动态添加箭头标记，如下图所示

---

这里有一个例子

您需要做的是创建

svg:defs

并将

svg:marker

元素放置在

defs

中。然后使用属性之一

marker end

、

marker mid

或

marker start

附加标记

// Per-type markers, as they don't inherit styles.
svg.append("defs").append("marker")
    .attr("id", "marker")
    .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("marker-end", "url(#marker)"; });

如果你需要一个直线中间的标记，如果中间没有节点的话，你可能会遇到标记不在中间画的问题。请看talkol的答案，了解如何解决此问题

这样，从这个问题的可接受答案中，可以得到这样的生成器函数，它生成了一个中间节点或圆弧的线，它是基于<代码> d类型< /代码>的。请在

---

@fekkyDEV你们能用你们的代码更新你们的问题吗？就像在图中一样，我会得到曲线和直线的链接。在曲线连接中，它工作得很好，但不是直线。@ FykykyDe:是的，我认为MaMID MID可能是相当笨重的，因为我认为它可能需要在中间有一个节点，否则它就不能绘制的路径。我认为你需要改变直线发电机在中间产生一个节点。我将用一个链接来更新我的答案，解决这个问题。在这篇文章中，他们提到使用Pryy线，但是我怎么能把它弯曲成曲线呢？这似乎在ChromeV41上起作用

// Per-type markers, as they don't inherit styles.
svg.append("defs").append("marker")
    .attr("id", "marker")
    .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("marker-end", "url(#marker)"; });

function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy)/4,
        mLx = d.source.x + dx/2,
        mLy = d.source.y + dy/2,
        mAx = d.source.x + dx,
        mAy = d.source.y + dy;
      if (d.type === "line") {
       return [
          "M",d.source.x,d.source.y,
           "L",mLx,mLy,
           "L",d.target.x,d.target.y,
           "Z"
          ].join(" ");
      }
    return [
      "M",d.source.x,d.source.y,
      "A",dr,dr,0,0,1,mAx,mAy,
      "A",dr,dr,0,0,1,d.target.x,d.target.y
    ].join(" ");
  });