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

2018-06-22 21:08:39

我试图通过试验他们的一个基本泡泡图来学习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中执行其他引用，例如表单提交？

SVG文档中的任何DOM元素都将拥有一个引用ownerSVGElement在的SVG文档的ownerSVGElement属性。

D3的选择只是嵌套数组，其上有额外的方法; 如果你有.select()一个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选择中，只是为了解开它。

您也可以通过selection.node（）方法获取选择代表的DOM元素

var selection = d3.select(domElement);

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

如果您需要追加，您可以将ID和类分配给各个元素：

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);

链接地址: http://www.djcxy.com/p/64179.html

上一篇: How to access the DOM element that correlates to a D3 SVG object?

下一篇: How do you change the size of figures drawn with matplotlib?