2016-04-23 14 views
0

Ich habe das folgende Problem: Ich machte ein Force-Diagramm mit nur Knoten als Kreise dargestellt. Alles funktionierte gut, ich konnte die Farbe beim Hover ändern, auf sie klicken und einige löschen.d3.js Mausereignisse funktionieren nicht

Ich schrieb diese Funktion, um das gewünschte Verhalten abhängig davon zu erhalten, welcher Datenwert übergeben wird. Es funktionierte heute Morgen, aber als ich versuchte, einem Freund zu zeigen, was ich gemacht hatte, hörte die Interaktion plötzlich auf zu arbeiten. Ich bekomme keine Fehlermeldungen. Irgendwie stimmt etwas nicht mit den .on(mouseover).on(mouseout) und .on(click) Ereignissen. Die Funktionen scheinen nicht ausgelöst zu werden. Ich bin mir sicher, dass ich den Code so belassen habe, als er funktionierte. Ich habe versucht, das Problem in den letzten paar Stunden herauszufinden.

function filterFor(data) { 
    var expression = data; 
    d3.selectAll("circle") 
    .on("mouseover", mouseOver) 
    .on("mouseout", mouseOut) 
    .on("click", mouseClick); 

    function mouseOver() { 
    d3.select(this).style("fill", "#ff4747"); 
    div.transition() 
     .duration(300) 
     .style("opacity", 1.0); 

    switch (expression) { 
     case 'study': 
     div.html(d.study) 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY - 50) + "px"); 
     d3.selectAll("circle").filter(function(d1, i) { 
      return d1.study === d.study 
     }).style("fill", "#ff4747"); 
     break; 
     case 'year': 
     div.html(d.year) 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY - 50) + "px"); 
     d3.selectAll("circle").filter(function(d1, i) { 
      return d1.year === d.year 
     }).style("fill", "#ff4747"); 
     break; 
    } 
    } 

    function mouseOut(d) { 
    console.log("mouseout fired"); 
    d3.select(this).style("fill", "#222222"); 

    d3.selectAll("circle").style("fill", "#222222"); 
    } 

    function mouseClick(d) { 

    console.log("mouseout fired"); 

    switch (expression) { 
     case 'study': 
     d3.selectAll('circle').each(function(d1) { 
      if (d1.study !== d.study) { 
      d3.select(this) 
       .attr("r", d1.radius) 
       .transition() 
       .duration(500) 
       .attr("r", 0) 
       .each("end", function() { 
       d3.select(this).remove(); 
       }); 
      } else { 
      d3.select(this).attr("r", d1.radius) 
       .transition() 
       .duration(200) 
       .attr("r", d1.radius * 1.5); 
      force.charge(-100); 
      force.start(); 
      } 
     }); 
     break; 
     case 'year': 
     d3.selectAll('circle').each(function(d1) { 
      if (d1.year !== d.year) { 
      d3.select(this) 
       .attr("r", d1.radius) 
       .transition() 
       .duration(500) 
       .attr("r", 0) 
       .each("end", function() { 
       d3.select(this).remove(); 
       }); 
      } else { 
      d3.select(this).attr("r", d1.radius) 
       .transition() 
       .duration(200) 
       .attr("r", d1.radius * 1.5); 
      force.charge(-100); 
      force.start(); 
      } 
     }); 
     break; 
    } 
    force.alpha([1.0]); 
    } 
} 

Dies ist meine erste Frage auf dieser Plattform, hoffentlich kann mir jemand helfen. Alles andere d3.js verwandt funktioniert gut. Zum Beispiel werden die Knoten generiert und die Kollision funktioniert. Das Problem muss innerhalb der Mausereignisse liegen.

This is what it looked like when it worked!

+0

Können Sie es in Geige reproduzieren? – echonax

+0

Ich habe es selbst herausgefunden. Es gab kein einziges Problem mit dem Javascript. Ich war offenbar ein Zurückgebliebener und habe beschlossen, dem Container der SVG einen negativen Z-Index zu geben. Musste Geige verwenden, um es herauszufinden, aber vielen Dank Herr. –

+0

froh, dass du es herausgefunden hast :) – echonax

Antwort

0

fand ich das Problem in meiner CSS-Datei. Aus irgendeinem Grund habe ich irgendwann beschlossen, dem Container der SVG einen negativen Z-Index zu geben. Also hat keines meiner Mausereignisse ausgelöst.

Dank echonach für den Tipp mit der Geige. Ich habe es herausgefunden, indem ich den Code dort seziert habe.