如何访问与D3 SVG对象相关的DOM元素？ [英] How to access the DOM element that correlates to a D3 SVG object?

问题描述

我试图通过尝试使用他们的基本气泡图。第一个任务：弄清楚如何拖动一个气泡，并在它被拖动时成为最顶层的对象。 （问题是得到D3的对象模型映射到DOM，但我会到那里...）

I'm trying to learn D3 by experimenting with one of their basic bubblecharts. First task: figure out how to drag an bubble and have it become the topmost object while it's being dragged. (The problem is getting D3's object model to map onto the DOM, but I'll get there...)

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

To drag it, we can simply invoke d3's drag behavior using the code they provide:

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

效果非常好。很好喝。现在，我们如何让它成为最顶层的项目？在这里搜索svg z-index，很明显，更改索引的唯一方法是在DOM中进一步向下移动对象。好。它们不容易，因为单个气泡没有ID，但是与控制台混乱，我们可以找到这些气泡对象之一：

Works great. Drags well. Now, how do we get it to be the topmost item? Search for "svg z-index" here and it becomes quickly apparent that the only way to change the index is to move an object further down in the DOM. OK. They don't make it easy because the individual bubbles don't have ID's, but messing around with the console, we can locate one of those bubble objects with:

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

$ b b

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

and we can move it to the end of the containing svg element with:

.appendTo('svg')

在这之后拖动它，它是最顶层的项目。到目前为止，这么好，如果你完全在DOM内工作。

Drag it after you do that, and it's the top-most item. So far, so good, if you're working entirely within the DOM.

但是，我真正想要做的是，每当一个给定的对象/泡沫被拖动时会自动发生。 D3为 dragstart（）和 dragend（）提供了一个模型，允许我们嵌入一个语句做我们希望在拖动过程中。 D3提供了 d3.select（this）语法，允许我们访问您当前拖动的对象/气泡的 d3的对象表示。但是我怎么干净地转动那个海量数组，他们返回一个DOM元素的引用，我可以与之交互，例如 - 将它移动到svg容器的末尾，或执行DOM中的其他引用，如表单提交？

BUT: what I really want to do is have that happen automatically whenever a given object/bubble is being dragged. D3 provides a model for dragstart() and dragend() functions that will allow us to embed a statement to do what we want during the dragging process. And D3 provides the d3.select(this) syntax that allows us to access d3's object representation of the object/bubble you're currently dragging. But how do I cleanly turn that massive array they return into a reference to a DOM element that I can interact with and - for instance - move it to the end of the svg container, or perform other references in the DOM, such as form submission?

推荐答案

SVG文档中的任何DOM元素都会有 ownerSVGElement 属性。

Any DOM element in an SVG document will have an ownerSVGElement property that references the SVG document it is in.

D3的选择只是嵌套数组，有额外的方法;如果你有 .select（）编辑单个DOM元素，你可以使用 [0] [0] ，例如：

D3's selections are just nested arrays with extra methods on them; if you have .select()ed a single DOM element, you can get it with [0][0], for example:

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 ，这已经是 DOM元素;你不需要将它包装在D3选择只是为了解开它。

Note, however, that if you are using d3.select(this) then this already is the DOM element; you don't need to wrap it in an D3 selection just to unwrap it.

这篇关于如何访问与D3 SVG对象相关的DOM元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！