0

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

http://jsfiddle.net/emepyc/LDpdz/4/

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 元素中更新。知道这是怎么回事吗？

4

2 回答 2

2

问题的根源是您正在设置as 数字的leftandtop属性。div这在 SVG 中运行良好，但 HTML 确实需要一个带有数字的单元。只需附加+ "px"到这些设置的末尾，它就可以正常工作。

不过还有一些其他的事情。您应该设置拖动的原点，否则当您开始拖动元素时您会注意到跳跃。我在这里实现了这个和其他一些简化。

于 2013-11-03T11:33:46.803 回答
1

当涉及到没有维度的值时，CSS 有点无情。

修复是添加px维度：

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

Demo

我也将 改为 theparent而body不是this. 您可能想要查看event.dx并使event.dy运动相对而不是绝对。

于 2013-11-03T11:32:46.960 回答