d3 - auslösen mouseover Ereignis

Question

Ich habe eine Karte der US-Bundesstaaten und Grafschaften in einer SVG-Grafik von D3 gerendert. Für jeden Pfad sind Mouseover-, Mouseout- und Klickereignisse sowie der FIPS-Ländercode als Pfad-ID festgelegt.

Ich habe eine jQuery Autocomplete-Eingabe, bei der der Benutzer den Namen eines Bundesstaates oder einer Grafschaft eingeben kann. Mit dieser Eingabe, die die entsprechende FIPS-ID zur Verfügung stellt, kann ich das mouseover-Ereignis programmgesteuert auslösen.

Answer 1

Strukturieren Sie Ihr Javascript so, dass das Mouseover-Ereignis eine JavaScript-Funktion aufruft und Sie diese Funktion dann jederzeit aufrufen können.

Answer 2

Ich fand die Antwort. Das Hauptproblem ist, dass D3 keine explizite Funktion trigger wie jQuery hat. Sie können es jedoch simulieren.

Sagen Sie bitte einen D3 Weg über

d3.json("us-counties.json", function(json){ 

    thisObj._svg.selectAll("path") 
    .data(json.features) 
    .enter().append("path") 
    .attr("d", thisObj._path) 
    .attr("class", "states") 
    .attr("id", function(d){ 
     return d.id; //<-- Sets the ID of this county to the path 
    }) 
    .style("fill", "gray") 
    .style("stroke", "black") 
    .style("stroke-width", "0.5px") 
    .on("dblclick", mapZoom) 
    .on("mouseover", mapMouseOver) 
    .on("mouseout", mapMouseOut); 
}); 

und ein Mouseover-Event-Handler gebaut haben, die die Füll- und Strichfarben

var mapMouseOver(d){ 

    d3.selectAll($("#" + d.id)) 
    .style("fill", "red") 
    .style("stroke", "blue"); 

} 

Typischerweise

zu verwenden, um

d3.select(this)... 

, die meisten Tutorials sagen ändert

aber tatsächlich funktioniert der Wert auch. Wenn Sie einen Ereignishandler haben, dass Sie die ID des Knotens wird, und lösen sie über

$("#someDropdownSelect").change(someEventHandler) 

function someEventHandler(){ 

    //get node ID value, sample 
    var key = $(this) 
       .children(":selected") 
       .val(); 

    //trigger mouseover event handler 
    mapMouseOver({id : key}); 

} 

das Mouseover-Ereignis ausführen basierend auf einem Drop-Down-Auswahl

Answer 3

Sie können dies erreichen, indem sie direkt die Veranstaltung Dispatching auf das gewünschte Element:

var event = document.createEvent('SVGEvents'); 
event.initEvent(eventName,true,true); 
element.dispatchEvent(event); 

Weiteres Detail in diesem blog post

Answer 4

Steve Greatrex Lösung für mich gearbeitet, bis iOS 9, aber nicht auf iOS 10.

Nach dem Debuggen meines Codes und einige Nachforschungen scheint es das Problem war, dass die Funktionen createEvent und initEvent gemäß dieser documentation veraltet sind.

Der neue Weg, dies zu schreiben, ist:

var event = new MouseEvent('SVGEvents', {}); 
element.dispatchEvent(event); 

Mehr Erklärung über die neue Art und Weise der Erstellung und auslösende Ereignisse mit Ereignisse Konstrukteuren here gefunden werden kann.