マウスアップイベントがd3.jsで起動しない

Question

私はユーザーがマウスで線を描くことができるd3.jsチャートを作成しようとしています。私は、グリッド上に透明な矩形を追加し、mousemove上で線画を開始することができますが、マウスアップイベントは決して検出されません。

var rect = chartContainer.append("rect") 
    rect.attr('x', 0) 
    .attr('y', 0) 
    .attr('width', width) 
    .attr('height', height) 
    .style({'fill': 'transparent'}) 
    .on("mouseup", mouseup) 
    .on("mousedown", mousedown); 

    function mouseup() { 
     console.log("mouse up"); 
     rect.on("mousemove", null); 
    } 

コードはここにある：https://jsfiddle.net/fLk405oc/

Answer 1

あなたはマウスカーソルまでlineを描いているので、mouseupイベントがrectではなくline自体にoccuringされていません。

function mousemove() { 
     var m = d3.mouse(this); 
     //console.log(drawnline); 
     drawnline 
     .attr("x2", m[0] - 1) //<-- -1 to get mouse on rect 
     .attr("y2", m[1] - 1); 
    } 

がfiddleを更新：最も簡単な修正は、マウスカーソルがその上にはないので、単にラインを少し短縮することです。