我正在使用D3函数each
,它接受一个回调函数并调用它作为参数传递this
,但我需要同时访问this
和_this
。这是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)
以及它生成的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);
如何让coffeescript在此行中使用this
并保持一致?:
return cell = d3.select(this) ...
问题是我无法将@x作为参数传递给each
并使用细箭头而不是胖箭头(因为那时我无法访问@x),除非我重写D3功能,这似乎有点矫枉过正。
答案 0 :(得分:13)
所以你有这个结构:
@x = ...
getRow = (row) =>
d3.select(@)...attr('x', (d, i) => @x(i))
rows = ...each(getRow)
但您需要getRow
成为普通的->
函数,以便将DOM元素作为@
获取,并且您需要将attr
回调作为绑定{{} 1}}函数所以=>
有效,对吧?
立刻想到两种可能性:
@x
技巧的CoffeeScript表单。var that = this;
回调使用命名绑定函数。第一个看起来像这样:
attr
第二个是这样的:
that = @
getRow = (row) ->
cell = d3.select(@)
.selectAll(".cell")
.data(row)
.enter().append("rect")
.attr("x", (d,i) -> that.x(i))