Holen Sie sich Pfeilspitzen-zu-Punkt an der äußeren Kante von Knoten in D3

Ich bin neu in D3 und ich bin versucht, zu erstellen eine interaktive Netzwerk-Visualisierung. Ich habe kopiert große Teile der diese Beispiel, aber ich habe geändert, die gekrümmten Linien gerade durch die Verwendung von SVG - "Linien" statt "wegen", und ich habe auch skaliert den Knoten entsprechend den Daten, die Sie darstellen. Das problem ist, dass meine Pfeilspitzen (erstellt mit SVG-Markierungen) sind an den enden der Linien. Da einige der Knoten sind groß, die Pfeile bekommen sich hinter Ihnen verbirgt. Ich möchte meine Pfeilspitzen zu zeigen, bis direkt an den Rand des Knoten Sie zeigen.

Hier ist, wie ich bin, das erstellen der 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 + ")"; });

Bemerkte ich, dass die "refX" - Attribut gibt an, wie weit vom Ende der Linie, die der Pfeil sollte nach oben zeigen. Wie kann ich diese abhängig vom radius des Knotens es ist zu zeigen? Wenn ich es nicht hätte, würde ich stattdessen ändern Sie die Endpunkte der Linien auf sich? Ich vermute, ich würde das nicht in dieser Funktion, die setzt die Endpunkte der Linien als alles, was sich 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 + ")";
        });
    }

Welches Konzept macht mehr Sinn, und wie sollte ich das umsetzen?

Diese Frage sollte helfen.

InformationsquelleAutor FrancesKR | 2013-05-21

d3.js svg

16

Dank Lars Kotthoff, habe ich diese arbeiten nach der Beratung durch die andere Frage! Zuerst wechselte ich von der Verwendung von Linien in Pfade. Ich glaube nicht, dass ich eigentlich zu tun hatte, aber es machte es einfacher, die anderen Beispiele, die ich war auf der Suche, denn Sie verwendet Pfade.

Dann habe ich noch einen "radius" - Feld, um meine Knoten. Ich wusste nur das wenn ich die radius-Attribut, indem Sie es als ein Tatsächliches Feld anstelle der Rückgabe der Wert sofort:
```
var circle = svg.append("svg:g").selectAll("circle")
                    .data(force.nodes())
                    .enter().append("svg:circle")
                    .attr("r", function(d) {
                        if (d.logic != null) {
                            d.radius = 5;
                        } else {
                            d.radius = node_scale(d.classSize);
                        }
                        return d.radius;
```
Danach editierte ich meinen tick () - Funktion in diesem radius zu berücksichtigen. Dies erforderte ein wenig einfache geometrie...
```
function tick(e) {

        path.attr("d", function(d) {
            //Total difference in x and y from source to target
            diffX = d.target.x - d.source.x;
            diffY = d.target.y - d.source.y;

            //Length of path from center of source node to center of target node
            pathLength = Math.sqrt((diffX * diffX) + (diffY * diffY));

            //x and y distances from center to outside edge of target node
            offsetX = (diffX * d.target.radius) / pathLength;
            offsetY = (diffY * d.target.radius) / pathLength;

            return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (d.target.y - offsetY);
        });
```
Grundsätzlich, im Dreieck der Pfad, es ist insgesamt eine x-change (diffX), und es ist insgesamt eine y-änderung (diffY) ist ein ähnliches Dreieck, das gebildet wird, indem das segment der Pfad im Ziel-Knoten (d.h. die Knoten radius), die x-change-innen der Ziel-node (offsetX) und die y-änderung innerhalb der Ziel-node (offsetY). Dies bedeutet, dass das Verhältnis der der Ziel-Knoten radius um die Pfadlänge ist gleich dem Verhältnis der offsetX zu diffX und dem Verhältnis von offsetY zu diffY.

Ich habe auch die refX den Wert 10 für die Pfeile. Ich bin mir nicht sicher, warum das notwendig war, aber jetzt scheint es zu funktionieren!
- Die Pfeilspitze gezeichnet, die in Ihrer Frage hat die form > ab "über" den Ursprung ((-5,0)) mit einer Linie auf der x-Achse ((10,0)), schließlich "unten", die Herkunft ((5,0)). Beachten Sie, dass SVG nicht im kartesischen Koordinatensystem, das oben Links ist die viewport-Ursprung. refX=10 macht sich für die horizontale Verschiebung und sorgt dafür, dass die Pfeilspitze Punkte, um am Ende des Weges (für die die Sie noch entfernen müssen Sie den radius-Länge).
InformationsquelleAutor FrancesKR
1

Ich antwortete auf die gleiche Frage hier. Die Antwort nutzt Vektor-Mathematik, ist es ganz nützlich für andere Berechnungen.

InformationsquelleAutor andsens

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.