d3 - wyzwalanie zdarzenia mouseover

Question

Mam mapę stanów i okręgów USA na grafice SVG renderowanej przez D3. Każda ścieżka zawiera związane z nią zdarzenia mouseover, mouseout i click, a także kod hrabstwa FIPS ustawiony jako identyfikator ścieżki.

Mam wejście do autouzupełniania jQuery, w którym użytkownik może wprowadzić nazwę stanu lub województwa. Biorąc pod uwagę, że dane wejściowe, które udostępniają odpowiedni identyfikator FIPS, w jaki sposób można programować zdarzenie mouseover?

Answer 1

Struktura twojego javascript tak, że zdarzenie mouseover wywołuje funkcję javascript, a następnie możesz wywołać tę funkcję w dowolnym momencie.

Answer 2

Wymyśliłem odpowiedź. Głównym problemem jest to, że D3 nie ma wyraźnej funkcji trigger, tak jak robi to jQuery. Możesz jednak to zasymulować.

Say masz ścieżkę D3 zbudowany przez

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); 
}); 

i obsługi zdarzeń mouseover że zmienia kolory obrysu i wypełnienia

var mapMouseOver(d){ 

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

} 

Zazwyczaj większość samouczki powiedzieć używać

d3.select(this)... 

, ale w rzeczywistości przy użyciu wartości działa również. Jeśli masz moduł obsługi zdarzeń, który dostaje identyfikator węzła, i wyzwolić go poprzez

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

function someEventHandler(){ 

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

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

} 

wykona zdarzenie mouseover w oparciu o wybór rozwijanej

Answer 3

Można to osiągnąć przez bezpośrednie dysponowanie zdarzenia na pożądany pierwiastek:

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

Zobacz więcej szczegółów na ten blog post

Answer 4

rozwiązanie

Steve Greatrex pracował dla mnie, dopóki iOS 9, ale nie na iOS 10.

Po debugowaniu kodu i niektórych badań wydaje się, że problem polegał na tym, że funkcje createEvent i initEvent są przestarzałe zgodnie z tym documentation.

Nowy sposób pisania to:

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

więcej wyjaśnień na temat nowego sposobu tworzenia i wywoływania zdarzeń z konstruktorów wydarzenia można znaleźć here.