3

私はd3jsのドラッグ動作を使用しています。ここにデモがあります。要素をクリックすると、「ドラッグ」および「ドラジェンド」イベントが発生しました。それらをドラッグしようとしなくても、イベントは発生します。アイテムのクリック時に他の関数を呼び出したいと思います。ドラッグ イベントは、アイテムをドラッグしたときにのみ発生する必要があります。ドラッグ イベントとクリック イベントを分離する方法は次のとおりです。

function onDragDrop(dragHandler, dropHandler) {
    var drag = d3.behavior.drag();

drag.on("drag", dragHandler)
.on("dragend", dropHandler);
return drag;
}

  var d = [{ x: 20, y: 20 }];

    var g = d3.select("body").select("svg").data(d).append("g").attr("transform", function (d) { return        "translate(" + d.x + "," + d.y + ")"; })
     .call(onDragDrop(dragmove, dropHandler));

g.append("rect")
.attr("width", 40)
.attr("height", 40)
.attr("stroke", "red")
.attr("fill","transparent")
.attr("x", "20" )
.attr("y", "20")

g.append("text")
.text("Any Text")
.attr("x", "20" )
.attr("y", "20")

function dropHandler(d) {
    alert('dropped');
}

function dragmove(d) {
  alert('dragged');
  d.x += d3.event.dx;
  d.y += d3.event.dy;
  d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
 }
4

2 に答える 2

1

期待した答えが得られなかったので、これを達成するための代替手段を提供しています。誰かがそれに答えてくれることを願っています。ありがとう@jonah。この点に関する最新情報を見つけたら、お知らせください。これを行う別の方法を次に示します。 

  var d = [{ x: 20, y: 20 }];
  var flag = false;

  var g = d3.select("svg").data(d).append("rect")
    .attr("width", 40)
    .attr("height", 40)
    .attr("stroke", "red")
    .attr("fill","transparent")
    .attr("x", "20" )
    .attr("y", "20")
    .on("click", function(){ console.log('clicked');})
   .call(d3.behavior.drag().on("drag", dragHandler).on("dragend", dropHandler))

 function dropHandler(d) {
       if(flag){
            console.log('dropped');
            flag = false;
        }}

 function dragHandler(d) {
        flag = true;
        console.log('dragged');
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate(" + d.x + "," + d.y + ")");
    }
于 2013-04-19T06:46:47.180 に答える