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

Question

Here is my current fiddle . I'm using foreignObjects to define custom icons for nodes (the fiddle is just using a ? but locally I'm using font-awesome icons). This works great, however the problem is that the arrows on the paths point to the top-left corner of the element. I've tried changing toying with many of the existing parameters and have looked through the API documentation but am unable to find a solution. I'm guessing I could do some complicated math in the code below, but I'm hoping for a parameter that can set some sort of radius for the end of the path.

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

The only documentation I found on paths was geo-paths. I tried using pointRadius anyway but it didn't seem to do anything at all. Here is the path definition:

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

You can use the transform attribute to adjust the position:

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