Javascript 屏幕上不显示箭头的D3弯曲连杆

我正试图添加曲线链接与箭头根据这一点，以我的

添加2个节点（

Add Node

按钮）并从选择框中选择源节点和目标节点后，当我按下

Add Link

按钮时，它不会显示链接，但是，节点会在屏幕上重新调整，显示链接已创建

我添加了以下代码（包括codepen中的一些变量定义）

早些时候：

link.attr("x1", function(d) { return d.source.x;    })
.attr("y1", function(d) {   return d.source.y;    })
.attr("x2", function(d) {   return d.target.x;    })
.attr("y2", function(d) {   return d.target.y;    });

---

这是因为您实际上没有创建任何对象来更改其属性，您尝试在创建任何链接之前，在文件顶部创建强制链接的路径。您需要根据“restart”函数中的链接创建路径，然后在“tick”函数中更新它们的属性。这是一个密码笔：

以下是相关的变化：

function restart() {
       ...
       ...
  link = link.data(links);
  link.enter()
      .append('path')
      .attr('class', 'link');
  link.exit().remove();

  force.start();
       ...
       ...
}

function tick() {
  link.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);
    return (
      "M" +
      d.source.x +
      "," +
      d.source.y +
      "A" +
      dr +
      "," +
      dr +
      " 0 0,1 " +
      d.target.x +
      "," +
      d.target.y
    );
  });
       ...
       ...
}

要向链接添加箭头，请执行以下操作：

var arrows = svg.append("defs")
            .selectAll("marker")
              .data(["arrow"])
              .enter()
              .append("marker")
                .attr("id", String)
                .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");

function restart() {
       ...
       ...
  link = link.data(links);
  link.enter()
      .append('path')
      .attr('class', 'link')
      .attr('marker-end', 'url(#arrow)');  
  link.exit().remove();

  force.start();
       ...
       ...
}

---

有趣的是，您只需要定义和创建箭头一次，更改“marker end”属性将自动生成箭头的另一个副本。相当整洁

谢谢@REEE；可以在同一代码中为链接添加箭头吗？没问题，你应该可以，我现在来看看。我可能有20-30分钟，因为我在工作。@nyi刚刚在代码笔中添加了箭头代码和上面的答案。希望有帮助。顺便说一句，它现在看起来好多了，节点上的图像非常漂亮！非常感谢@REEE。我的目标是将html页面连接到发送添加/删除节点/链接信息的WebSocket，目前，我正在尝试通过html/javascript函数模拟它。

var arrows = svg.append("defs")
            .selectAll("marker")
              .data(["arrow"])
              .enter()
              .append("marker")
                .attr("id", String)
                .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");

function restart() {
       ...
       ...
  link = link.data(links);
  link.enter()
      .append('path')
      .attr('class', 'link')
      .attr('marker-end', 'url(#arrow)');  
  link.exit().remove();

  force.start();
       ...
       ...
}