¿Cómo usar `this` y`_this`(flecha adiposa) usando coffeescript?

d3.js

Question

Estoy usando la función D3 each , que acepta una función de devolución de llamada y la llama pasando this como argumento, pero necesito acceder a this y a _this . Este es el código de coffeescript:

@x = d3.scale.ordinal().domain(d3.range(@model.geneExpressions[0].length)).rangeBands([0, width])
getRow = (row) =>
cell = d3.select(this).selectAll(".cell")
.data(row)
.enter().append("rect")
.attr("x", (d,i) => @x(i))
rows = @heatmap.selectAll(".row")
.data(@model.geneExpressions)
.enter().append("g")
.each(getRow) 

y el javascript que genera:

 var _this = this;
this.x = d3.scale.ordinal().domain(d3.range(this.model.geneExpressions[0].length)).rangeBands([0, width]);
getRow = function(row) {
var cell;
return cell = d3.select(_this).selectAll(".cell").data(row).enter().append("rect").attr("x", function(d, i) {
return _this.x(i);
})
};
rows = this.heatmap.selectAll(".row").data(this.model.geneExpressions).enter().append("g").attr("class", "row").each(getRow);

¿Cómo puedo obtener coffeescript para usar this en this lugar en esta línea y dejar todo igual ?:

return cell = d3.select(this) ...

El problema es que no puedo pasar @x como argumento a each y usar la flecha delgada en lugar de la flecha adiposa (porque entonces no podía acceder a @x), a menos que reescriba la función D3, que parece excesiva.

Answer 1

Entonces tienes esta estructura:

@x = ...
getRow = (row) =>
d3.select(@)...attr(''x'', (d, i) => @x(i))
rows = ...each(getRow)

Pero necesitas que getRow sea ​​una función normal -> para que tenga el elemento DOM como @ y necesitas que la devolución de llamada attr sea ​​una función bound => para que @x funcione, ¿no?

Dos posibilidades vienen inmediatamente a la mente:

1. Use la forma CoffeeScript de la var that = this; habitual JavaScript var that = this; truco.
2. Use una función enlazada nombrada para la devolución de llamada attr .

El primero se ve así:

that = @
getRow = (row) ->
cell = d3.select(@)
.selectAll(".cell")
.data(row)
.enter().append("rect")
.attr("x", (d,i) -> that.x(i)) 

El segundo es así:

x_at_i = (d, i) => @x(i)
getRow = (row) ->
cell = d3.select(@)
.selectAll(".cell")
.data(row)
.enter().append("rect")
.attr("x", x_at_i)