我正在使用每个D3函数,它接受一个回调函数并调用它作为参数传递,但是我需要访问这个和_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在这一行中使用这个方法呢？
return cell = d3.select(this) ...
问题是,我不能通过@x作为每个参数,并使用薄箭头而不是胖箭头(因为我无法访问@x),除非我重写D3功能,这似乎是过度的.
解决方法
所以你有这样的结构：
@x = ...
getRow = (row) =>
d3.select(@)...attr('x',i) => @x(i))
rows = ...each(getRow)
但是你需要getRow成为一个普通的 – >函数,以便将DOM元素作为@,您需要将attr回调为bound =>功能,所以@x工作,对吧？
两种可能立即出现：
>使用通常的JavaScript var that = this的CoffeeScript形式;招.
>为attr回调使用一个命名的bound函数.
第一个看起来像这样：
that = @
getRow = (row) ->
cell = d3.select(@)
.selectAll(".cell")
.data(row)
.enter().append("rect")
.attr("x",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)
