奇妙なドラッグの動作を修正する方法は？ここ

Question

は簡略化されたコードである：

this.x.domain(d3.extent(data, d => d.x)); 
this.y.domain([ 0, d3.max(data, d => d.y) ]); 

svg.selectAll('circle') 
      .data(data) 
      .enter() 
      .append("circle") 
      .attr('cx', d => this.x(d.x)) 
      .attr('cy', d => this.y(d.y)) 
      .attr('r', 4) 
      .attr('class', 'circle') 
      .style("fill", "white") 
      .style("stroke", "steelblue") 
      .style("pointer-events", "all") 
      .style("stroke-width", "2px") 
      .call(d3.drag() 
        .on("start", dragStarted) 
        .on("drag", dragged) 
        .on("end", dragended)); 

function dragStarted(d) { 
    d3.select(this).raise().classed("active", true); 
} 

function dragged(e) { 

      let yLocation = d3.event.y; 
      e.y   = y.invert(d3.mouse(this)[ 1 ]); 

      console.log(e); 
      d3.select(this) 
       .attr("cy", yLocation); 

      // update(data); 

    } 

Iは第一円をドラッグするときに問題があり、円はチャートの上部範囲に配置されます。円はちょうど上に上がります。どのようにしてドラッグの開始位置が円の元の位置から始まるかどうか確認できますか？

Answer 1

私はd3.drag()にこれを追加することで、これを解決：

d3.drag().subject(function() { 
    let t = d3.select(this); 
     return { x: t.attr("cx"), y: t.attr("cy") 
}; 

これはジャンプせずに元の位置を修正します。