2015-10-01 16 views
14

È 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.

+1

@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

+1

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

+0

@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

risposta

8

È possibile utilizzare le funzioni freccia se non è necessario accedere a this dell'elemento corrente.

Fallback alle funzioni di stile precedente per i casi in cui si desidera accedere a this dell'elemento corrente.

Oppure utilizzare esplicito vincolante per consentire al funzione (non freccia funzione) per l'accesso qualunque oggetto che si desidera utilizzare .bind()

Per evitare di lavorare con this si ha la possibilità di utilizzare il nome D3 o di classe selettori per accedere comodamente qualsiasi elemento ad esempio

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

Non è possibile modificare il comportamento di una funzione di freccia. Il loro binding è 'hardcoded' e non può essere modificato re-binding con il metodo bind o invocando qualsiasi altro metodo Function che accetta un contesto di esecuzione esplicita (ad esempio apply). Lo stesso può dirsi di qualsiasi funzione associata: una volta vincolato, la funzione restituita viene associata a per sempre.

È possibile?

Con il suddetto in mente, se d3 utilizza bind ing fornire comodo comportamento concatenamento, questo non possono essere realizzati utilizzando funzioni freccia fino API d3 è modificato in qualche modo per accoglierli.

5

Se si utilizza d3v4, è possibile accedere al nodo DOM corrente in questo modo:

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 
Problemi correlati