Получите идентификатор перетаскиваемого элемента в d3.js

Question

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

У меня есть куча кругов SVG, созданных вручную (через React). Затем я прикрепляю поведение d3 к всем им. Применяется поведение перетаскивания, и функция перетаскивания выполняется, но когда я перетаскиваю один из этих кругов, я не могу ответить соответствующим образом, потому что я не знаю, какой из них был перемещен. Где я могу получить идентификатор перетаскиваемого элемента?

Я проверил несколько других вопросов и нашел только какое-то безумное решение для фильтров ... это не может быть так.

Я также заглянул в docs и нашел свойство subject .. однако, что он имеет значение null, везде я пробовал.

Мой код:

componentWillUpdate() { 
    let nodes = d3.selectAll("circle"); 

    const dragFn = (d,i) => { 
     d3.event.sourceEvent.stopPropagation(); 
     this.props.onNodeDrag(I_NEED_AN_ID_HERE); 
    } 

    const dragBehavior = d3.behavior.drag(); 
    dragBehavior.on('drag', dragFn); 
    dragBehavior.on('dragstart',() => { 
     d3.event.sourceEvent.stopPropagation(); 
    }); 

    nodes.call(dragBehavior); 
    } 

Answer 1

Я не знаю, что ваш «это» внутри функции, но в штатской JS вы можете получить любой атрибут элемента HTML с:

d3.select(this).attr("id"); //or class etc. 

или если он обернут

d3.select(this).select("circle").attr("id"); 

Вот пример: http://jsfiddle.net/a2QpA/343/