d3 - событие триггерной мыши

Question

У меня есть карта штатов и округов США в графике SVG, отображаемом D3. На каждом пути есть привязки мыши, мыши и клики, привязанные к нему, а также код округа FIPS, заданный как идентификатор пути.

У меня есть вход автозаполнения jQuery, где пользователь может ввести имя состояния или округа. Учитывая, что вход, который делает соответствующий идентификатор FIPS доступным, как я могу запрограммировать событие mouseover?

Answer 1

Создайте свой javascript таким образом, чтобы событие mouseover вызывало функцию javascript, а затем вы можете вызвать эту функцию в любое время.

Answer 2

Я понял ответ. Основная проблема заключается в том, что D3 не имеет явной функции trigger, как это делает jQuery. Однако вы можете имитировать его.

Скажем у вас есть путь D3, построенный с помощью

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

и обработчик событий курсора, находящегося, который изменяет цвета заливки и обводки

var mapMouseOver(d){ 

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

} 

Как правило, большинство учебников говорят использовать

d3.select(this)... 

, но на самом деле использование значения также работает. Если у вас есть обработчик событий, который получает вам идентификатор узла, и запустить его с помощью

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

function someEventHandler(){ 

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

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

} 

выполнит событие курсора, находящиеся на основе выделенного ниспадающего

Answer 3

Вы можете достичь этого путем непосредственной отправки события на искомый элемент:

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

Смотреть более подробно в этом blog post

Answer 4

решение

Стива Greatrex никогда работал для меня до тех пор, iOS 9, но не на iOS 10.

После отладки моего кода и некоторых исследований кажется, что проблема в том, что функции createEvent и initEvent устарели в соответствии с этим documentation.

Новый способ написания этого:

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

Больше объяснения о новом способе создания и запуска событий с конструкторами событий можно найти here.