Using arrow functions with d3

Question

Is it possible? I am not sure, since d3 makes heavy use of this rebindings and this seems to conflict with ES6 spec.

For instance, the following works fine:

// 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

While the following does not work as expected (this is not bound to the current element in the enter selection but to Window object):

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

Related fiddle here.

@chriskelly your example simply sets the same value for all the elements in the selection, that's not what I want achieve (that's why functions are used in a per-element basis) — jarandaf, Oct 01 '15 at 07:03
When I run your example the only difference I see is the output console log. But why would you want to access ```this```. This is an interesting question but I would like to know a case where it would be an issue. — chriskelly, Oct 01 '15 at 07:06
@chriskelly it's a pretty concrete use case (have some function which I want to reuse that creates a complex structure of elements within the svg group, I need `this` to know what group I am referencing to, where new elements will be appended). — jarandaf, Oct 01 '15 at 07:09

score 12 · Answer 1 · answered Aug 29 '16 at 18:37

If you are using d3v4, you can access the current DOM node like this:

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

chriskelly · Accepted Answer · 2015-10-01T10:07:07.787

You can use arrow functions if you don't need access to this of the current element.

Fallback to the old style functions for cases where you want to access this of the current element.

Or use explicit binding to allow your function (not arrow function) to access whatever object you want using .bind()

To avoid working with this you have the option of using d3 name or class selectors to conveniently access any element. e.g.:

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

score 3 · Answer 3 · answered Oct 01 '15 at 09:49

It is not possible to modify the behaviour of an arrow function. Their binding is 'hardcoded' and cannot be changed by re-binding with the bind method or by invoking any other Function method that accepts an explicit execution context (e.g. apply). The same can be said of any bound function -- once bound, the returned function is bound forever.

Is it possible?

With the above in mind, if d3 uses binding to provide convenient chaining behaviour, this cannot be achieved using arrow functions until d3's API is modified in some way to accommodate them.

Using arrow functions with d3

3 Answers3

Linked

Related