Я новичок в D3 и пытаюсь создать интерактивную визуализацию сети. Я скопировал большие частиэто Например, но я изменил кривые линии на прямые, используя SVG «линии», а не «пути», и я также масштабировал узлы в соответствии с данными, которые они представляют. Проблема в том, что мои стрелки (созданные с помощью маркеров SVG) находятся на концах линий. Поскольку некоторые узлы большие, стрелки скрываются за ними. Я бы хотел, чтобы мои стрелки появлялись прямо на внешнем крае узла, на который они указывают.

Вот как я создаю маркеры и ссылки:

svg.append("svg:defs").selectAll("marker")
    .data(["prereq", "coreq"])
    .enter().append("svg:marker")
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

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

Я заметил, что атрибут «refX» указывает, как далеко от конца линии должна отображаться стрелка. Как я могу сделать это зависимым от радиуса узла, на который он указывает? Если я не могу этого сделать, могу ли я вместо этого изменить конечные точки самих линий? Я предполагаю, что я сделал бы это в этой функции, которая сбрасывает конечные точки линий, когда все движется:

function tick() {
        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; });

        circle.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

        text.attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });
    }

Какой подход имеет больше смысла, и как бы я его реализовал?