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