Question

我正在尝试使用div元素而不是svg元素编写“draggable”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元素中的样式元素不会更新。知道这是怎么回事吗？

Answer 1

问题的根源在于您将left的{{1}}和top属性设置为数字。这在SVG中运行良好，但HTML确实需要一个带有数字的单元。只需将div附加到这些设置的末尾，它就可以正常工作。

但还有其他一些事情。您应该设置origin of the drag，否则在开始拖动元素时会注意到跳转。我已经实现了这个以及其他一些简化here。

Answer 2

对于没有维度的值，CSS有点无法容忍。

此修复程序正在添加px维度：

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

Demo

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

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

2 个答案: