Element vom Pfad löschen?

[milesdavis]

Hey Leute,
ich hätte da mal eine Frage an euch.
Ich nutze d3.js und dazu das Force-Layout.
Und zwar bekomme ich vom Webservice 2 Pfade übergeben, welche farblich herbvogehoben werden.

In der angehängten Grafik ist das Problem dargestellt. Der Startknoten ist Gelb und der Endknoten Grün. Ein Pfad ist blau, der andere schwarz.

Die Pfade werden über die ids der Knoten übergeben.
Das heisst der schwarze Pfad lautet: 1,2,3,4,5,6,7,8,9,10
Und der blaue: 1,7,8,9,10

Nun ist es so, dass beide Pfade über einen gemeinsamen Knoten gehen. Dies wäre der orangene mit der id 7.

Nun ist folgendes Problem: Ich kann zwischen diesen beiden Pfaden hin und her wechseln, also einmal zeigt er mir nur blau an und einmal nur schwarz. Beim blauen klappt es wunderbar, weil er der kürzere ist. Beim schwarzen ist es leider so, dass er mir die verbindung zwischen dem gelben knoten mit id1 und dem orangenen mit id 7 auch anzeigt. Im Bild ist es die rechte zeichnung.
Es liegt einfach daran, dass diese Verbindungen durch die Anordnung einfach existieren. Die hervorhebung des schwarzen Pfades schaut im code so aus, wobei in p der startknoten un der endknoten gespeichert sind:

link.style("stroke", function(d) 
                {				
                  return (p.includes(d.source) && p.includes(d.target) ? "black" : "grey";
							
                 				  
                });

Also ich schaue nur, ob es eine existierende verbindung gibt durch source und target komponente der kanten. Meine frage ist, wie kann ich verhindern, dass er mir die Verbindung zwischen den knoten 1 und knoten 7 anzeigt? Also quasi so wie im bild link? Könnte man sich die einzelnnen links zwischen den knoten irgendwie speichern und am ende den falschen rauslöschen?

 

[tsseh]

Also ich schaue nur, ob es eine existierende verbindung gibt durch source und target komponente der kanten.

dann musst du nur nach src (oder target) suchen und als 2. bedingung überprüfen ob target auf dem nächsten index im pfad-array liegt, je nachdem ob der graph gerichtet ist oder nicht musst du entweder nur idx+1 oder idx ± 1 beachten

 

[milesdavis]

Ja, das hatte ich auch gedacht. Aber wie kann man das denn lösen, wenn man eine id-Liste vorgegeben hat? Man müsste quasi die Vorgabe so gestalten, dass man nur eine einzige verbindung zwischen 1 und 2 hat, zwischen 2 und 3, zwischen 3 und 4.....usw.

 

[tsseh]

deine id-liste "1,2,3,4,5,6,7,8,9,10" bedeutet ja du hast eine verbindung von 1 nach 2, von 2 nach 3, ...
wenn du in den links die 1 als source findest, musst du nachsehen, ob die 2 das target ist, dann ist es die verbindung die du suchst, ist target etwas anderes ala 2, ist es eine anders.
du musst also wenn source ein element deiner liste auf index i ist nachsehen ob target das element auf i+1 ist

 

[milesdavis]

danke dir! wenn ich das ganze ungerichtet machen möchte, muss ich dann source und target gleichzeitig prüfen?

 

[tsseh]

wenn du source auf index i findest, musst du prüfen ob target das element auf i+1 oder i-1 ist

 

[milesdavis]

So, habe nun dies hier probiert.
Also ich vergleiche so zusagen alle elemente von p und erhöhe immer um 1.
Nun klappt das leider nicht so ganz. Wenn man die schleife direkt nach

 link.style("stroke", function(d)

setzt, klappt es ebenso nicht, weil er dann nicht durch alle elemente von p geht.
weisst du, wo hier der fehler liegen könnte?

				for (i=0; i < p.length; i++){
				
		  		link.style("stroke", function(d) 
                {
				

				    return p[i] == d.source && p[i+1] == d.target ? "black" : "grey";
					
					}
				  
                 
				 ) 
                };

 

[tsseh]

weisst du, wo hier der fehler liegen könnte?

wie soll man dass sehen, wenn du immern nur einen winzigen code-schnipsel postest?
auf jeden fall sieht die schleife um link.style falsch aus. du musst innerhalb der anonymen funktion in deinem array den knoten suchen welchen d.source repräsentiert. der index ist dann dein i.