Nodes anklicken und Tooltip anzeigen lassen

[milesdavis]

Hey Leute,
mit dem Force-Layout in d3.js kann ich quasi per Mausklick auf die Nodes klicken (Codesnippet nicht dabei, da unwichtig.) und mir ein tooltip anzeigen lassen.
Nun möchte ich, dass mir das Tooltip, abhängig vom geklickten Node, die zugehörige id im Tooltip anzeigt.
Also wenn ich "husten" klicke, soll 12 angezeigt werden, wenn ich "schnupfen" anklicke, dann soll 5 angezeigt werden.
Leider wird in meinem Code unten bei jedem angeklickten Node immer 12 angezeigt, also die id vom aller ersten Node.
Weiss jemand, woran das liegen könnte?
Vielen lieben Dank!
Gruss

data = {
          nodes: [
                  {id: 12, name: "husten"   }, 
                  {id: 5,  name: "schnupfen"},
                  {id: 2,  name: "hals"     },
                  {id: 3,  name: "auge"     },
                  {id: 30, name: "bein"     },
                  {id: 70, name: "ohr"      }
                  ],
.
.
.
.

var tooltip = d3.select("body")
    .data(force.nodes())
	.append("div")
	.attr("class", "tooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden") 
	.text(function(d) {return d.id; })
	
	;

 

[tsseh]

du zeigst zwar den mouseover (oder click bei dir) eventhandler nicht, aber ich vermute du setzt dort nicht die id

haste das mit dem pfad hinbekommen(aus dem anderen thread)?

 

[milesdavis]

Hey tsseh, danke für deine Antwort.

Das Problem aus dem anderen Thread habe ich noch nicht hinbekommen, aber ich arbeite dran

Hier mal der Eventhandler:

var node = svg.selectAll(".node")
              .data(nodes)
            .enter().append("g")
              .attr("class", "node")
              .call(force.drag);

node
  .append("circle")
  .attr("r", node_radius)
  .on("mouseover", mouseOver)
  .on("mouseout", mouseOut)
  .on("click", function(){return tooltip.style("visibility", "visible");})
  .on("dblclick", function(){return tooltip.style("visibility", "hidden");})

Warum muss man die id im Eventhandler setzen?

 

[tsseh]

Das Problem aus dem anderen Thread habe ich noch nicht hinbekommen, aber ich arbeite dran

wie gesagt, wenn du fragen hast frage

Warum muss man die id im Eventhandler setzen?

weil du nur ein div (oder besser nur ein body mit einem div) hast und damit nur die 1. node mit data an das div bindest. du könntest zwar auch für jede node ein div anlegen, aber das wäre zuviel des guten. deswegen lass das binden der daten an das div weg und setze beim click auf die node den text des divs auf die id der node

 

[milesdavis]

Damit würde ich ja den tooltip-bereich so aussehen lassen, als wäre es nur ein tooltip ohne inhalt? denn wenn ich

.data(force.nodes())

rausnehme, dann muss ich gleichzeitig

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

entfernen, sonst funktioniert das Programm nicht.
Der Code vom tooltip würde so aussehen:

var tooltip = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden") 
	
	
	;

Blöde frage, aber würde in dem code von tooltip eventuell das hinzufügen von append("g").selectAll("div") helfen? Also quasi, wenn ich beide eben entfernte zeilen NICHT entfernen würde?


Aber wie setze ich diesen rat von dir um? " setze beim click auf die node den text des divs auf die id der node"

- - - Aktualisiert - - -

gut, habe es gerade mit dem hinzufügen von append("g").selectAll("div") probiert und es klappt.....nicht....war ja klar

 

[tsseh]

var tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("position", "absolute")
  .style("z-index", "10")
  .style("visibility", "hidden") ;

function showTooltip(d)
{
  tooltip.text(d.id);
  tooltip.style("visibility", "visible");
}

node
  // ...
  .on("click", showTooltip);

 

[milesdavis]

WAHNSINN!!! DANKE DIR!! Es funktioniert! Eigentlich ist es im Nachhinein ziemlich simpel, aber ich komme von selbst nie drauf. Liegt aber auch daran, dass ich mit Javascript und D3 noch nicht lange arbeite.

Nochmal eine Frage, wenn ich die showTooltip funktion ändere in

function showTooltip(d)
{
  return tooltip.text(d.name);
  return tooltip.style("visibility", "visible");
  }

geht es nicht mehr. Kannst du mir kurz erklären, wieso?

 

[tsseh]

weil nach dem 1. return die funktion beendet ist und alles nach dem return nicht ausgeführt wird.
ein return macht dort auch nicht wirklich sinn.

 

[milesdavis]

.