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

Question

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

Я пытаюсь узнать D3, экспериментируя с одним из их основные bubblecharts. Первая задача: выяснить, как перетащить пузырь и сделать его самым верхним объектом во время перетаскивания. (Проблема заключается в том, чтобы получить объектную модель 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) синтаксис, который позволяет нам получить доступ к Д3 представление объекта объекта / пузырька, который вы в настоящее время перетаскиваете. Но как могу ли я чисто превратить этот массивный массив, который они возвращают, в ссылку на элемент DOM, с которым я могу взаимодействовать, и, например, переместить его в конец контейнера svg или выполнить другие ссылки в DOM, такие как представление формы?

660 3

dom svg visualization data-visualization

3 ответов:

Comments

Ничего не найдено.

Tom Dunn · Accepted Answer · 2016-11-23 18:55:19

вы также можете получить элемент DOM, представленный выделением через выбор.node () method
var selection = d3.select(domElement);

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

Phrogz · Accepted Answer · 2012-04-26 23:56:10

любой элемент 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 только для того, чтобы разверните его.

Elijah · Accepted Answer · 2012-04-26 21:12:33

Вы можете назначить идентификаторы и классы для отдельных элементов, если вы хотите, когда вы добавляете:
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("круг.пузырь") или выберите по идентификатору и измените атрибуты следующим образом:
var testCircle = svg.select("#idlabel_3")
.style("stroke-width", 8);