wie man seltsames Widerstandsverhalten korrigiert?

Question

Hier ist der vereinfachte Code:

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); 

    } 

Das Problem ist, wenn ich den Kreis ersten ziehen, der Kreis am oberen Umfang des Diagramms positioniert wird. Der Kreis geht einfach hoch. Wie kann ich sicherstellen, dass das Ziehen an der ursprünglichen Position des Kreises ohne diese Verschiebung beginnt?

Answer 1

Ich löste dies durch diese zu d3.drag() Zugabe:

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

Dies wird die ursprüngliche Position, ohne den Sprung zu beheben.