拖动时非 svg D3 工具提示不更新答案

【问题标题】：non-svg D3 tooltip not updating when dragging拖动时非 svg D3 工具提示不更新
【发布时间】：2013-11-03 02:01:27
【问题描述】：

我正在尝试使用 div 元素而不是 svg 元素来编写“可拖动”的 d3 工具提示。这是代码：

var drag = d3.behavior.drag()
.on("drag", function(d) {
    console.log(this);
    var coords = d3.mouse(this);
    console.log(coords);
    d3.select(this)
        .style("right", coords[0])
        .style("left", coords[0])
        .style("top", coords[1])
    .call(function(){console.log(coords)});
});

var div = d3.select("body")
    .append("div")
    .attr("id", "kk")
    .style("position", "absolute")
    .style("left", "100px")
    .style("top", "50px")
    .call(drag);

div
    .append("table")
    .append("th")
    .text("Hello world");

我很疑惑，因为虽然在拖拽的时候调用了回调，但是样式元素并没有在div元素中更新。知道这是怎么回事吗？

【问题讨论】：

标签： javascript d3.js draggable

【解决方案1】：

问题的根源在于您将div 的left 和top 属性设置为数字。这在 SVG 中运行良好，但 HTML 确实需要一个带有数字的单元。只需将+ "px" 附加到这些设置的末尾即可。

还有一些其他的东西。您应该设置origin of the drag，否则当您开始拖动元素时您会注意到跳跃。我已经实现了这个和其他一些简化here。

【讨论】：

Arrgh... 是的，我需要睡一会儿。也非常感谢其他提示！

【解决方案2】：

当涉及到没有尺寸的值时，CSS 有点无情。

修复方法是添加px 维度：

d3.select(this)
    .style("left", coords[0] + 'px')
    .style("top", coords[1] + 'px')

Demo

我还将parent 更改为body，而不是this。您可能需要查看 event.dx 和 event.dy 以使运动相对而不是绝对。

【讨论】：