10

eachコールバック関数を受け入れ、それを引数として渡すD3 関数を使用していますが、 とthisの両方にアクセスする必要がありthisます_this。これはコーヒースクリプトのコードです:

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

そしてそれが生成するJavaScript：

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

thisこの行で代わりに使用する coffeescript を取得し、すべてを同じままにしておくにはどうすればよいですか?:

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

問題は、@x を引数として渡してeach、太い矢印の代わりに細い矢印を使用できないことです (@x にアクセスできなかったため)。

4

1 に答える 1

13

したがって、次の構造があります。

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

しかし、DOM要素を取得するにgetRowは通常の関数である必要があり、コールバックはバインドされた関数である必要があるため、機能しますよね?->@attr=>@x

次の 2 つの可能性がすぐに思い浮かびます。

  1. var that = this;通常の JavaScriptトリックの CoffeeScript 形式を使用します。
  2. コールバックに名前付きバインド関数を使用しattrます。

最初のものは次のようになります。

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

2番目は次のようになります。

x_at_i = (d, i) => @x(i)
getRow = (row) ->
    cell = d3.select(@)
        .selectAll(".cell")
        .data(row)
        .enter().append("rect")
        .attr("x", x_at_i)
于 2012-06-07T23:49:38.947 に答える