dom - 如何访问与 D3 SVG 对象相关的 DOM 元素？

Question

我正在尝试通过尝试他们的 basic bubblecharts 之一来学习 D3 。第一个任务:弄清楚如何拖动气泡并使其在拖动时成为最上面的对象。 (问题是让 D3 的对象模型映射到 DOM，但我会到达那里......)

要拖动它，我们可以使用它们提供的代码简单地调用 d3 的拖动行为:

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

效果很好。拖得很好。现在，我们如何让它成为最上面的项目？在这里搜索“svg z-index”，很快就会发现更改索引的唯一方法是将对象在 DOM 中进一步向下移动。好的。它们并不容易，因为各个气泡没有 ID，但是通过控制台，我们可以通过以下方式找到其中一个气泡对象:

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

我们可以将它移动到包含 svg 元素的末尾:

.appendTo('svg')

完成此操作后将其拖动，它就会成为最顶部的项目。到目前为止，一切都很好，如果您完全在 DOM 内工作的话。

但是:我真正想做的是每当拖动给定的对象/气泡时自动发生这种情况。 D3 为 dragstart() 和 dragend() 函数提供了一个模型，允许我们嵌入一条语句以在拖动过程中执行我们想要的操作。 D3 提供了 d3.select(this) 语法，允许我们访问您当前拖动的对象/气泡的 d3 对象表示。但是，我如何干净利落地将它们返回的庞大数组转换为对我可以与之交互的 DOM 元素的引用，例如将其移动到 svg 容器的末尾，或在 DOM 中执行其他引用，例如表单提交？

Answer 1

您还可以通过 selection.node() method 获取由选择表示的 DOM 元素

var selection = d3.select(domElement);

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