Ich bin neu in D3 und versuche, eine interaktive Netzwerkvisualisierung zu erstellen. Ich habe große Teile davon kopiertdiese Beispiel, aber ich habe die gekrümmten Linien in gerade Linien geändert, indem ich SVG "Linien" anstelle von "Pfaden" verwendet habe, und ich habe auch die Knoten entsprechend den Daten skaliert, die sie darstellen. Das Problem ist, dass meine Pfeilspitzen (erstellt mit SVG-Markern) am Ende der Zeilen sind. Da einige der Knoten groß sind, werden die Pfeile hinter ihnen versteckt. Ich möchte, dass meine Pfeilspitzen direkt am äußeren Rand des Knotens angezeigt werden, auf den sie zeigen.

So erstelle ich die Marker und Links:

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

Mir ist aufgefallen, dass das Attribut "refX" angibt, wie weit die Pfeilspitze vom Ende der Zeile entfernt sein soll. Wie kann ich dies vom Radius des Knotens abhängig machen, auf den er zeigt? Wenn ich das nicht kann, kann ich stattdessen die Endpunkte der Leitungen selbst ändern? Ich schätze, ich würde das in dieser Funktion tun, die die Endpunkte der Linien zurücksetzt, wenn sich alles bewegt:

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

Welcher Ansatz ist sinnvoller und wie würde ich ihn umsetzen?