Question

Here is my current fiddle。我正在使用foreignObjects为节点定义自定义图标（小提琴只是使用？但在本地我使用的是字体很棒的图标）。这很好用，但问题是路径上的箭头指向元素的左上角。我尝试使用许多现有参数更改玩具，并查看了API文档，但无法找到解决方案。我猜我可以在下面的代码中做一些复杂的数学运算，但我希望有一个参数可以为路径的末尾设置某种半径。

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;
}

我在路径上找到的唯一文档是地理路径。无论如何我尝试使用pointRadius但它似乎根本没有做任何事情。这是路径定义：

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 + ")"; });

Answer 1

您可以使用transform属性调整位置：

var path = svg.append("g").selectAll("path")
  .data(force.links())
  .enter().append("path")
  .attr("transform", "translate(10,10)")
  .attr("class", function (d) { return "link " + d.type; })
  .attr("marker-end", function (d) { return "url(#" + d.type + ")"; });

相对于foreignObject节点调整标记位置？

1 个答案: