Zwei Knoten nacheinander auswählen und Pfad dazwischen anzeigen.

tsseh · 19. Nov. 2016

die texte sollten schon irgendwo oben links auftauchen.
sind sie denn im dom?

milesdavis · 19. Nov. 2016

ahhh, habe es nun hinbekommen...

musste

Code:

.text(function(d) { return d.name });

ändern in:

Code:

.text(function(d) { return d.data.name });

frage mich aber nur, warum das so ist?

tsseh · 19. Nov. 2016

weil hierarchy den ursprünglichen daten-knoten wrappt, in data

milesdavis · 20. Nov. 2016

wie immer: danke!!
Habe es jetzt hinbekommen, dass er mir auch noch alle nodes zwischen dem start-und endknoten rotfärbt und vergrößert. dadurch ist auch der startknoten und der endknoten rot und vergrößert. Nun möchte ich, dass diese beiden beim klicken immer eine andere farbe (gelb) bekommen und nur die nodes auf dem weg dazwischen rot werden.
habe mir da folgendes überlegt:

der code ist quasi dieser:

Code:

var path = startNode && startNode.path(d) || [];
                startNode = d;

....

node.style("fill", function(d) 
                {return path.startnode || path.startNode.path() ? "yellow" : "red";
....

mit path.startnode als startknoten und path.startNode.path() als endknoten, welche "yellow" werden sollen und die nodes dazwischen "red"....aber leider muss ich hier einen denkfehler haben

tsseh · 20. Nov. 2016

Code:

var path = startNode && startNode.path(d) || [];
....
node.style("fill", function(n)
{
  return path.includes(n) ?  (n == startNode || n == d) ? "yellow" : "red" : "#999";
}
....
startNode = d;

milesdavis · 21. Nov. 2016

da hätte ich mal eine frage, wenn ich es so schreibe (platzierung von startNode = d kommt an anderer stelle):

Code:

var path = startNode && startNode.path(d) || [];
startNode = d;
....
node.style("fill", function(n)
{
  return path.includes(n) ?  (n == startNode || n == d) ? "yellow" : "red" : "#999";
}
....

Dann zeigt er mir immer nur einen angeklickten Node als gelb an, vermutlich der Startknoten....konnte das jetzt aus dem code nicht entziffern, warum?

tsseh · 21. Nov. 2016

die funktion wird mit dem angeklickten knoten aufgerufen.
startnode wurde beim n-ten aufruf auf d gesetzt, also den knoten der beim n-ten klick angeklickt wurde.
jetzt bist du im n+1-ten aufruf. wenn du gleich am anfang startnode = d setzt, ist ab da startnode und d der beim n+1-ten mal angeklickte knoten.
machst du das erst am ende, ist bis dahin:
startnode der knoten der beim n-ten klick angeklickt wurde
d der knoten der beim n+1-ten klick angeklickt wurde

milesdavis · 29. Nov. 2016

Hey, hätte nochmal ein anliegen. Habe einen text an einer festen stelle im svg definiert:

Code:

var text1 = svg.append("text")
	.attr("dx", 112)
	.attr("dy", 490)
	.text("Erstes Node: " + )
        .text("Zweites Node: " + )
        .text("Drittes Node: " + )

Ich möchte im Grunde genommen, dass er mir die durch diesen code

Code:

var path = startNode && startNode.path(d) || [];

....
node.style("fill", function(n)
{
  return path.includes(n) ?  (n == startNode || n == d) ? "yellow" : "red" : "#999";
}
....
startNode= d
text1.text("Erstes Node: " + d.data.name)

die automatisch angeklickten ersten drei nodes rausgibt, also den startNode, und die beiden ersten danach.
Durch den oberen code kann ich mir bisher nur den startNode angeben, weil ich ja schließlich immer auf den StartNode am Anfang drücke. Da komme ich gerade nicht weiter...wäre es zb sinnvoll, für jedes Node, eine extra variable zu definieren und diese dann in der funktion einzeln aufzurufen oder kann man das auch mit dem oben definierten "var text1" hinbekommen?

tsseh · 30. Nov. 2016

milesdavis schrieb:
Hey, hätte nochmal ein anliegen. Habe einen text an einer festen stelle im svg definiert:

dort schon .text("Erstes Node: " + ) ... unterzubringen nutzt dir ja noch nichts

milesdavis schrieb:
die automatisch angeklickten ersten drei nodes rausgibt, also den startNode, und die beiden ersten danach.

startnode ist ja der vorhergehende, es gibt also keine zwei danach, sondern nur einen
dann benötigst du ein array, in denen du immer die letzten 3 knoten speicherst, analog dem beispiel aus #5 nur mit 3 punkten anstelle von 2

milesdavis · 30. Nov. 2016

Danke, habe den Code aus #5 mal geändert in:

Code:

{
              points.push(d);
             if (points.length > 3) 
              {
                points.shift();
              } 
              if (points.length > 1)
              { 
                console.log("start: ", points[0].name, "end: ", points[1].name, "neu: ", points[2].name)
              }
            });

es funktioniert wunderbar, er zeigt mir immer 3 nodes an, die ich geklickt habe. nur wird aber ebenfalls in der konsole die fehlermeldung
"points[2] is undefined" angegeben...woran liegt das?

tsseh · 30. Nov. 2016

daran, dass du beim 2. klick points[2].name ausgeben willst

milesdavis · 30. Nov. 2016

Danke, habe es in

Code:

if (points.length > 2)

geändert, klappt nun

wenn ich nun im falle von

Code:

var path = startNode && startNode.path(d) || []

das erste Element von path ansprechen möchte, also den startNode, dann funktioniert das prima mit path[0].name...um das aller letzte element zu kriegen, müsste man sicherlich mit der länge des arrays rangehen, oder?

tsseh · 30. Nov. 2016

milesdavis schrieb:
um das aller letzte element zu kriegen, müsste man sicherlich mit der länge des arrays rangehen, oder?

das letzte ist bei einem array mit 3 elementen das auf index 2 bzw. wenn du noch im click-handler bist das aktuelle, also d (welches du gerade mit points.push(d); eingefügt hast)

milesdavis · 30. Nov. 2016

ich probiere gerade das ganze für diese funktion umzusetzen

Code:

var path = startNode && startNode.path(d) || []

also quasi das beispiel, bei dem man 2 nodes anklickt und sich den pfad anzeigen lässt...dadurch lasse ich points komplett weg...path[d].name funktioniert nicht. habe auch schon an pop gedacht, aber da entfernt er auch immer das letzte element

bei diesem fall variiert die länge von path auch immer, je nachdem wie viele nodes zwischen start und ende sind.

wenn ich zb sage, dass er mir bestimmte stellen im array ausgeben soll wie hier start und 2 nodes danach, also insgesamt 3 nodes :

Code:

console.log("start: ", path1[0].data.name, "mitte: ", path1[1].data.name, "mitte2: ", path1[2].data.name)

dann kriege ich ja einen fehler, wenn ich nur insgesamt 2 nodes auswähle, also nur start und end und kein node dazwischen

tsseh · 30. Nov. 2016

http://forum.jswelt.de/javascript/6...en-pfad-dazwischen-anzeigen-5.html#post402086

milesdavis · 30. Nov. 2016

Du, sag mal, ich probiere gerade mit dem hierarchy-layout pfeile anzubringen. Nun ist es so, dass hierbei kein "source" und "target" wert vorhanden ist.
In diesen beispiel könnte man das machen: http://bl.ocks.org/mbostock/1062288

und zwar mit diesem code für nodes:

Code:

function flatten(root) {
  var nodes = [], i = 0;

  function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    nodes.push(node);
  }

  recurse(root);
  return nodes;
}

und diesem für links

Code:

 links = d3.layout.tree().links(nodes)

Nun ist das problem, dass der code für die links (gibt "source" und "target" werte), aus der version v3 ist und es ihn in der v4 nicht mehr in der form gibt. Könnte man nun manuell in v4 die "source" und "target" werte geben?

milesdavis · 04. Dez. 2016

In diesem beispiel (allerdings in v3):Directional Force Layout Diagram with varying link opacity - bl.ocks.org

werden die "source" und "target" werte über diesen code gesetz:

Code:

links.forEach(function(link) {
    link.source = nodes[link.source] || 
        (nodes[link.source] = {name: link.source});
    link.target = nodes[link.target] || 
        (nodes[link.target] = {name: link.target});
    link.value = +link.value;
});

Dies müsste eigentlich auch für mein besipiel funktionieren?

tsseh · 05. Dez. 2016

milesdavis schrieb:
Du, sag mal, ich probiere gerade mit dem hierarchy-layout pfeile anzubringen. Nun ist es so, dass hierbei kein "source" und "target" wert vorhanden ist.

ich kann dir nicht folgen, wo ist kein "source" und "target" vorhanden? "source" und "target" sind doch immer vorhanden.

milesdavis schrieb:
und zwar mit diesem code für nodes:

der code erzeugt ein array mit knoten

milesdavis schrieb:
und diesem für links

der nutzt tree um die links als array zu bekommen

milesdavis schrieb:
Nun ist das problem, dass der code für die links (gibt "source" und "target" werte), aus der version v3 ist und es ihn in der v4 nicht mehr in der form gibt. Könnte man nun manuell in v4 die "source" und "target" werte geben?

die links bekommst du über hierarchy

Code:

var hierarchy = d3.hierarchy(root);
var links = hierarchy.links();

- - - Aktualisiert - - -

milesdavis schrieb:
Dies müsste eigentlich auch für mein besipiel funktionieren?

was ist denn dein beispiel?

milesdavis · 05. Dez. 2016

Hey danke dir, habe es nun hinbekommen. War eigentlich ganz einfach. VG

milesdavis · 13. Jan. 2017

Hallo tsseh,
ich komme gerade nicht weiter. Kannst du nochmal helfen?
Folgendes: habe ich nun 2 Knoten ausgewählt und den Pfad hervorgehoben.
Nun habe ich zusätzlich einen Button erzeugt, der alle Einstellungen quasi wieder zurücksetzt, also alle Knoten und Links wieder auf die Ursprungsgröße. Nun ist das Problem, dass er sich gemerkt hat, welcher Knoten zuletzt geklickt wurde, obwohl nichts mehr farblich hervorgehoben ist. Nennen wir diesen Knoten mal A.

Das heisst, wenn man nun im Zustand, in dem nichts farblich hervorgehoben ist, einen beliebigen Knoten B drückt, wird automatisch der Pfad zwischen A und B angezeigt. Also die Frage ist, wie man nun diesen Merkzustand aufheben kann?
Ich habe dazu ein neues Array angelegt, weil ich dachte, es wird überschrieben, aber leider funktioniert das nicht.
Vielen Dank!!

Zwei Knoten nacheinander auswählen und Pfad dazwischen anzeigen.

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

New member