javascript - ブラシ機能で複数の線を引くときの質問

Question

d3 を使用して 1 つのグラフに複数の線を描画し、ブラシ機能を実装しようとしています ( http://bl.ocks.org/1667367 )

コードの下の部分では、右側に各行の名前が表示されます。

focudraw.select("text")
  .datum(function(d){
      return {name:d.name,value : d.values[d.values.length-1]};
  })
  .attr("transform",function(d){ 
      return "translate("+x(d.value.date)+","+y(d.value.price)+")"
    })
  .text(function(d){return d.name});

ただし、 contextdraw(on the below) を移動するときに動的にブラッシングすると、そのテキストの位置は変わらず、変更する考えがあまりありません。

ブラシ関数の focudraw.select("text") に焦点を当て、d.values のインデックスを右に変更する必要があると思います。新しいx.domain()[ 1 ] を d.values の最後のインデックスにマップする方法を知っています。しかし、位置はそれほど正確ではありません...

function brush(){
x.domain(brush.empty() ? navx.domain() : brush.extent());

focudraw.select("path").attr("d",function(d){
  return line(d.values);    
});


focudraw.select("text")
  .datum(function(d){
      return {name:d.name,value : d.values[d.values.length-1]};
  })
  .attr("transform",function(d){ 
      return "translate("+x(d.value.date)+","+y(d.value.price)+")"
    })
  .text(function(d){return d.name});


focu.select(".x.axis").call(xAxis);

}