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

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

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

Ответ 1

Я понял ответ. Основная проблема заключается в том, что 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);
});

и обработчик события mouseover, который изменяет цвета заливки и штриха

var mapMouseOver(d){

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

}

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

d3.select(this)...

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

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

function someEventHandler(){

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

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

}

выполнит событие mouseover на основе выпадающего списка

Ответ 2

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

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

Подробнее в этом сообщении в блоге

Ответ 3

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

Ответ 4

Решение Steve Greatrex работало для меня до iOS 9, но не на iOS 10.

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

Новый способ записи:

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

Подробнее о новом способе создания и запуска событий с конструкторами событий можно найти здесь.