d3で矢印関数を使用

Question

可能ですか？ d3はthisの再バインドを頻繁に使用するため、これはES6 specと競合しているようです。例えば

は、以下では正常に動作します：

// Working fine 
var data = [1,2,3] 
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'orange'); 
var gs = svg.selectAll('g').data(data).enter(); 
gs.append('circle') 
    .attr('cx', function() { return Math.random()*500; }) 
    .attr('cy', function() { return Math.random()*500; }) 
    .attr('r', function() { return Math.random()*100; }) 
    .each(function() { console.log(this); }); // this is bound to the current element in the enter selection 

（thisが入力選択で現在の要素にバインドされたが、Window対象にされていない）期待どおりに動作しません、次の中：

var data = [1,2,3] 
var svg = d3.select('body').append('svg').attr('height', 500).attr('width', 500).style('background-color', 'blue'); 
var gs = svg.selectAll('g').data(data).enter(); 
gs.append('circle') 
    .attr('cx',() => Math.random()*500) 
    .attr('cy',() => Math.random()*500) 
    .attr('r',() => Math.random()*100) 
    .each(() => console.log(this)); // this is bound to Window object 

関連フィドルhere。

Answer 1

現在の要素のthisにアクセスする必要がない場合は、矢印機能を使用できます。

現在の要素のthisにアクセスする場合のための古いスタイル関数にフォールバックします。

それとも、あなたがへの便利なアクセスD3名やクラスセレクタを使用するオプションを持っているthisで作業を避けるために.bind()

を使って好きなオブジェクトにアクセスするためにあなたの機能（機能を矢印ではない）を許可するように明示的なバインディングを使用任意の要素。例：

var stuffINeed = svg.selectAll('.someClass'); 

Answer 2

矢印機能の動作を変更することはできません。それらのバインディングは「ハードコード」されており、bindメソッドで再バインドするか、明示的な実行コンテキストを受け入れる他のFunctionメソッド（たとえばapply）を呼び出すことによって変更することはできません。バインドされた関数についても同じことが言えます。一度バインドされると、返される関数はいつもにバインドされます。

可能ですか？心の中で上記で

d3は便利な連鎖動作を提供するためにbind INGを使用している場合はD3のAPIは、それらに対応するために、いくつかの方法で変更されるまで、このは矢印の機能を使用してを達成することはできません。

Answer 3

あなたがd3v4を使用している場合は、このような現在のDOMノードにアクセスすることができますが：

gs.append('circle') 
    .attr('cx',() => Math.random()*500) 
    .attr('cy',() => Math.random()*500) 
    .attr('r',() => Math.random()*100) 
    .each((d, i, j) => console.log(j[i])); 
     // j is current group, i is current index