È possibile? Non sono sicuro, dal momento che d3 fa un uso intensivo delle rebindings this
e questo sembra essere in conflitto con ES6 spec.Utilizzo delle funzioni freccia con d3
Ad esempio, il seguente funziona bene:
// 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
Mentre il seguente non funziona come previsto (this
non è vincolata all'elemento corrente nella selezione entrare ma Window
oggetto):
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
violino correlato here.
@chriskelly tuo esempio imposta semplicemente lo stesso valore per tutti gli elementi nella selezione, che non è quello che voglio realizzare (ecco perché le funzioni sono utilizzate in base agli elementi) – jarandaf
Quando eseguo il tuo esempio, l'unica differenza che vedo è il log della console di output. Ma perché dovresti accedere a '' this this'''. Questa è una domanda interessante ma vorrei sapere un caso in cui sarebbe un problema. – chriskelly
@chriskelly è un caso d'uso piuttosto concreto (avere una funzione che voglio riutilizzare che crea una complessa struttura di elementi all'interno del gruppo svg, ho bisogno di questo per sapere a quale gruppo sto facendo riferimento, dove verranno aggiunti nuovi elementi). – jarandaf