Блог

Я пытаюсь получить привязанные данные узлов с selection.on() помощью D3 v6. В моем прослушивателе событий я получаю данные о событии мыши вместо данных. Как мне получить данные?

Это мой код

 const data = {
        "nodes": [{
            "id": "Myriel",
            "group": 1
        }, {
            "id": "Napoleon",
            "group": 1
        }]};

const nodes = data.nodes.map(d => Object.create(d));

const node = svg.append("g")
        .selectAll("circle")
        .data(nodes)
        .join("circle")
        ...

  node.on("mouseover",d=>{
      console.log(d); //output = MouseEvent
      console.log(d.id); //output = undefined
  });
  

D3v5 и более ранние версии

В d3v5 и более ранних версиях мы могли использовать шаблон:

 selection.on("eventType", function(d,i,nodes) { .... })
  

Где d — данные элемента, запускающего событие, i его индекс и nodes текущая группа элементов. Информация о событии может быть доступна в прослушивателе событий с d3.event помощью .

D3v6

В d3v6 шаблон был изменен:

 selection.on("eventType", function(event, d) { .... })
  

Теперь событие передается непосредственно слушателю в качестве первого параметра, данные теперь являются 2-м параметром, передаваемым слушателю. Как часть этого изменения d3.event было удалено.

Как указано в документации:

D3 теперь передает события непосредственно слушателям, заменяя глобальный d3.event и внедряя D3 в ванильный JavaScript и большинство других фреймворков. (источник)

Это изменение относится к brush.on , transition.on , и drag.on , zoom.on а также selection.on .

это

Вы все еще можете использовать d3.select(this) в функции прослушивателя событий, как вы делали до d3v6. Однако при использовании функций со стрелками this они будут иметь другую область видимости. В d3v5 и более ранних версиях вы могли бы использовать:

 (d,i,nodes) => d3.select(nodes[i])...
  

В d3v6 вы можете использовать (для selection.on() ):

 (event,d) => d3.select(event.currentTarget)...
  

Позиционирование

Чтобы получить позицию x, y инициирующего события, где вы бы использовали d3.mouse(this) , теперь вы можете использовать:

 d3.pointer(event);
  

Где вы бы использовали d3.event.x и d3.event.y , в d3v5, теперь вы бы использовали:

 event.x, event.y
  

Пример

Ниже приведен простой пример передачи события и данных функции прослушивателя в D3v6. Фрагмент использует d3.pointer() для получения свойств x,y щелчка относительно SVG. Щелкните по прямоугольнику, чтобы получить данные прямоугольника и свойства x и y события, зарегистрированного в консоли:

 var svg = d3.select("body")
 .append("svg");
 
svg.selectAll("rect")
 .data([1,2,3])
 .enter()
 .append("rect")
 .attr("width",30)
 .attr("height",30)
 .attr("x", function(d) { return d*50; })
 .on("click", function(event, d) {
   console.log(d); 
   console.log(d3.pointer(event));
 })  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.0.0/d3.min.js"></script>  

Что насчет i and nodes ?

Индекс и группа узлов больше не передаются функции прослушивателя событий. Однако в руководстве по миграции приведены примеры того, как найти текущую группу узлов и индекс здесь.