Как получить доступ к элементу DOM, который соответствует объекту SVG D3?

Я пытаюсь изучить D3, экспериментируя с одним из своих базовых пузырьков. Первая задача: выяснить, как перетащить пузырь и стать ли он самым верхним объектом во время его перетаскивания. (Проблема заключается в том, что объектная модель D3 будет отображаться на DOM, но я туда доберусь...)

Чтобы перетащить его, мы можем просто вызвать поведение перетаскивания d3 с помощью кода, который они предоставляют:

var drag = d3.behavior.drag()
    .on("dragstart", dragstart)
    .on("drag", dragmove)
    .on("dragend", dragend);

Отлично работает. Хорошо перетаскивается. Теперь, как мы получим, что это самый верхний элемент? Найдите здесь "svg z-index", и становится очевидным, что единственный способ изменить индекс - переместить объект дальше в DOM. ОК. Они не облегчают работу, потому что у отдельных пузырьков нет идентификаторов, но возиться с консолью, мы можем найти один из этих объектов пузырьков:

$("text:contains('TimeScale')").parent()

и мы можем переместить его в конец содержащего svg элемента с помощью:

.appendTo('svg')

Перетащите его после этого, и это самый верхний элемент. Пока что так хорошо, если вы полностью работаете в DOM.

НО: то, что я действительно хочу сделать, это то, что происходит автоматически, когда данный объект/пузырь перетаскивается. D3 предоставляет модель для функций dragstart() и dragend(), которые позволят нам встроить инструкцию для выполнения того, что мы хотим во время процесса перетаскивания. И D3 предоставляет синтаксис d3.select(this), который позволяет нам получить доступ к представлению объектов d3 объекта/пузыря, который вы сейчас перетаскиваете. Но как я могу почистить этот массивный массив, который они возвращают, в ссылку на элемент DOM, с которым я могу взаимодействовать, и, например, переместить его в конец контейнера SVG или выполнить другие ссылки в DOM, такие как отправка формы

Ответ 1

Любой элемент DOM в документе SVG будет иметь свойство ownerSVGElement, которое ссылается на документ SVG, в котором он находится.

Выбор D3 - это только вложенные массивы с дополнительными методами на них; если у вас есть .select() ed один элемент DOM, вы можете получить его с помощью [0][0], например:

var foo = d3.select(someDOM);

// later, where you don't have someDOM but you do have foo
var someDom = foo[0][0];
var svgRoot = someDom.ownerSVGElement;

Обратите внимание, однако, что если вы используете d3.select(this), тогда this уже является элементом DOM; вам не нужно обертывать его в D3, чтобы развернуть его.

Ответ 2

Вы также можете получить элемент DOM, представленный выбором, с помощью метода selection.node()

var selection = d3.select(domElement);

// later via the selection you can retrieve the element with .node()
var elt = selection.node();

Ответ 3

Вы можете назначать идентификаторы и классы отдельным элементам, если хотите, когда вы добавляете:

node.append("circle.bubble")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.packageName); })
.attr("id", function(d, i) { return ("idlabel_" + i)})
.attr("class", "bubble")
;

И затем вы можете выбрать по классу с помощью selectAll ( "circle.bubble" ) или выбрать по id и изменить атрибуты следующим образом:

var testCircle = svg.select("#idlabel_3")
.style("stroke-width", 8);