ドラッグ時にd3でデータが正しく渡されるようにするにはどうすればよいですか？

Question

私はユーザーがy軸に沿っていくつかの点をドラッグできるd3チャートを持っています。

私がしようとしているのは、元のデータ配列を更新して、そのチャートに表示されている任意の値に対するユーザーの更新された選択肢を含めることです。ここ

は、ドラッグ機能である：

function dragged(e) { 
      let yLocation = d3.event.y; 

      let index; 
      for (index = 0; index < data.length && data[ index ][ 'x' ] !== e.x; index++) { 
      } 
      data[ index ][ 'y' ] = (y.invert(d3.mouse(this)[ 1 ])); 

      d3.select(this).select("circle") 
       .attr("cy", e.y = yLocation); 

      update(data); 
     } 

配列内の値を更新しようとしたときに私の問題がある：

data[ index ][ 'y' ] = (y.invert(d3.mouse(this)[ 1 ])); 

私がしようと(y.invert(d3.mouse(this)[ 1 ]))をログインした場合、正しい値（値対応しますマウスの位置まで）が表示されますが、データ配列を記録しようとすると、オブジェクトはその位置に対応する値の代わりにマウスの位置で更新されます。

オブジェクトの配列を更新する前に、値を制御することを約束しますか？または、より良い解決策がありますか？ ありがとうございます。

Answer 1

この行を行うには何をしようとしている。ここで

d3.select(this).select("circle") 
.attr("cy", e.y = yLocation); 

eは、アレイ内のデータオブジェクトです。 e.yをyLocationに設定すると、配列データのy値がマウスの位置に更新されます。 を覚えておいてください。JavaScriptオブジェクトを関数に渡すとき、オブジェクトには参照（同じオブジェクト）という意味です。これは、データ配列を検索して更新する必要がないことを意味します。すでに必要な部分があります。

ここ正しいコード（もちろん、テストされていない）は、次のとおりです。

let yLocation = d3.event.y; 
e.y = y.invert(d3.mouse(this)[ 1 ]); 
d3.select(this).select("circle") 
    .attr("cy", yLocation);