10

我正在使用 D3 函数each，它接受一个回调函数并将其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在这一行中使用咖啡脚本并保持一切不变？：

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

问题是我不能将@x 作为参数传递给each并使用细箭头而不是粗箭头（因为那时我无法访问@x），除非我重写了D3 函数，这似乎有点矫枉过正。

4

1 回答 1

13

所以你有这个结构：

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

但是您需要getRow成为一个普通->函数，以便它获取 DOM 元素，@并且您需要attr回调成为绑定=>函数，这样才@x有效，对吗？

立即想到两种可能性：

  1. 使用常用 JavaScriptvar that = this;技巧的 CoffeeScript 形式。
  2. attr为回调使用命名绑定函数。

第一个看起来像这样：

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

第二个是这样的：

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 回答