¿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)