2012-06-07 13 views
9

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 _this. Este es el código CoffeeScript:Cómo usar `this` y` _this` (flecha de grasa) usando 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 código 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 utilizar this lugar en esta línea y dejar todo lo mismo ?:

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

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

Respuesta

12

Por lo que tiene esta estructura:

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

Pero hay que getRow a ser una función normal -> para que llegue el elemento DOM como @ y necesita la devolución de llamada attr ser una cota => función para @x funciona, ¿verdad?

dos posibilidades vienen a la mente:

  1. Utilice el formulario CoffeeScript de la habitual JavaScript var that = this; truco.
  2. Utilice una función delimitada para la devolución de llamada attr.

La primera de ellas es como la siguiente:

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

La segunda es la siguiente:

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

Usted me salvó. ¡Gracias! – nachocab

+0

Gran respuesta mu. –

Cuestiones relacionadas