将d3.js JavaScript函数翻译为CoffeeScript。

Question

我担心在将这段JavaScript转换为类内的CoffeeScript时，可能会犯一个简单的错误。

在这个世界地图的原始示例中，我们有一个函数：

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

当地图被渲染时，就会调用此函数：

.attr("class", function(d) { return quantize(rateById.get(d.id)); })

现在我们得到了类似于 class="q8-9 的东西，这正是我们想要的。

将其转换为 CoffeeScript 如下：

quantize: ->
  d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map((i) -> "q" + i + "-9" ))

然后我这样调用它：

.attr("class", (d) => @quantize(rateById.get(d.id)) ) 

然而，它并没有返回一个值，而是返回了scale函数，使我得到了这个: 类="函数scale(x){return range[Math.max(0,Math.min(i,Math.floor(kx*(x-x0))))];}" 我确定我做了一些非常简单的错误，但无法弄清楚。你能帮忙吗？

- Derek Hill

Answer 1

替代

quantize: ->
  d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map((i) -> "q" + i + "-9" ))

you want

quantize : 
  d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map((i) -> "q" + i + "-9" ))

->用于定义函数，但在这里你只是调用一个返回函数的函数，所以它类似于JavaScript中的对应物。

注意：从你一开始使用: ->和@quantize（翻译为this.quantize）来看，看起来你正在将quantize存储在一个对象中，这很好，并且是上面代码所假设的。如果你的代码实际上更像你链接到的原始示例，其中quantize只是一个变量，那么你将需要quantize = d3...和quantize(rateId.get(d.id))（没有@）。

在CoffeeScript网站顶部的“尝试CoffeeScript”链接让你编写CoffeeScript并将其转换为JavaScript，这是学习和理解转换内容的好方法。还有可用于浏览器的插件可以实现此功能。

- go-oleg

---

谢谢。你和@edi9999的回答都很好，所以很难决定接受哪一个！你正确地推断出我正在将quantize存储在一个对象中，所以我会选择这个答案;-)。 - Derek Hill

Answer 2

在你的Javascript代码中，quantize包含一个值：

var quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

但在你的CoffeeScript版本中，quantize是一个函数：

quantize: ->
  d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map((i) -> "q" + i + "-9" ))

您应该只需执行以下操作：

quantize = d3.scale.quantize()
    .domain([0, .15])
    .range(d3.range(9).map((i) -> "q" + i + "-9" ))

为了保持量化（quantize）为函数，请移除 @quantize 中的 @ 符号，这在 JavaScript 中被翻译成 this.quantize，因为看起来 quantize 是一个变量而不是属性。参考 属性和变量的区别 。

- edi9999