d3：ドラッグアンドドロップでデルタyを正しく計算するには？

Question

following d3 snippetを参照してください。円を上下にドラッグして積み重ねた棒要素のサイズを変更すると、カーソルのサイズが変更されるよりも速くまたは遅くなることがわかります。実際には、右端にあるバーよりも...なぜそうですか？どのように修正することができますか？

ドラッグ動作が影響を与える行はここに0.3なぜによって縮小されである基本的にライン＃から110

var drag2 = d3.behavior.drag() 
.on("drag", function(d) { 
    var datum = data[d.group]; 
    var dy = d3.event.dy * 0.3; // <<<<<<<<<<<<<<<<< here is scaled down 
    if(d.i == 0) {    // but no matter what weight I put here 
    datum.bars[0].y1 -= dy; // it will always be too fast or too slow .. 
    datum.bars[1].y0 -= dy; 
    } else { 
    datum.bars[1].y1 -= dy; 
    datum.bars[2].y0 -= dy; 
    } 
    d.y -= dy; 

    render(rects) 
}) 

を定義していますか？私はその重さで遊んだが、価値がないので、エッジが引きずられ、カーソルが均等に保たれているように見える。

UDPATEこの他の例How can I click to add or drag in D3?は正しい方法がtransform/translateを使用して算出するが、これらの要素の属性であり、私のOPに影響を受けた対象は、データ自体ではなく視覚的な要素であることを示しています。

Answer 1

あなたはそうのような、dyを計算するために逆スケールを使用する必要があります。

var dy = d3.event.dy * d.total/height;