0

svg 要素の代わりに div 要素を使用して、「ドラッグ可能な」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

left問題の原因は、とtopの属性をdiv数値として設定していることです。これは SVG では正常に機能しますが、HTML では実際には数字の単位も必要です。これらの設定の最後に追加+ "px"するだけで問題なく動作します。

他にもいくつかあります。ドラッグの原点を設定する必要があります。そうしないと、要素のドラッグを開始したときにジャンプに気付くからです。ここでは、これと他のいくつかの単純化を実装しました。

于 2013-11-03T11:33:46.803 に答える