Отрегулировать положение маркера относительно узла foreignObject?

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