Jestem nowym użytkownikiem D3 i próbuję stworzyć interaktywną wizualizację sieci. Skopiowałem duże częścito na przykład, ale zmieniłem zakrzywione linie na proste, używając SVG „linii”, a nie „ścieżek”, a także skalowałem węzły zgodnie z danymi, które reprezentują. Problem polega na tym, że moje groty strzałek (utworzone za pomocą znaczników SVG) znajdują się na końcach linii. Ponieważ niektóre węzły są duże, strzałki są ukryte za nimi. Chciałbym, żeby moje groty pokazywały się na zewnętrznej krawędzi węzła, na który wskazują.

Oto jak tworzę znaczniki i linki:

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

Zauważyłem, że atrybut „refX” określa, jak daleko od końca linii powinien pojawić się grot strzałki. Jak mogę uzależnić to od promienia węzła, na który wskazuje? Jeśli nie mogę tego zrobić, czy mogę zamiast tego zmienić punkty końcowe samych linii? Zgaduję, że zrobiłbym to w tej funkcji, która resetuje punkty końcowe linii, gdy wszystko się porusza:

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

Które podejście ma więcej sensu i jak je wdrożyć?