将 d3.js JavaScript 函数翻译成 CoffeeScript答案

【问题标题】：Translate d3.js JavaScript function to CoffeeScript将 d3.js JavaScript 函数翻译成 CoffeeScript
【发布时间】：2013-07-17 13:05:50
【问题描述】：

恐怕我在如何将这个 JavaScript 转换为类中的 CoffeeScript 时犯了一个简单的错误

在这个original example of a world map我们有一个函数：

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

然而，这并没有返回一个值，而是返回了缩放函数，给我留下了这个：

class="function scale(x) { return range[Math.max(0, Math.min(i, Math.floor(kx * (x - x0))))]; }"

我确定我做错了一些非常简单的错误，但无法弄清楚。你能帮忙吗？

【问题讨论】：

标签： javascript coffeescript d3.js

【解决方案1】：

而不是

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

-> 在定义函数时使用，但在这里你只是调用一个函数（它恰好返回一个函数），因此它类似于它的 JavaScript 对应项。

注意：根据您以 : -> 开头和 @quantize 转换为 this.quantize 的事实判断，您似乎将 quantize 存储在一个很棒的对象中，这就是代码以上假设。如果您的代码实际上更像您链接到的原始示例，其中 quantize 只是一个变量，那么您将需要 quantize = d3... 和 quantize(rateId.get(d.id))（没有 @）。

CoffeeScript site 顶部的“试用 CoffeeScript”链接可让您编写 CoffeeScript，它会随时转换为 JavaScript，这是学习和理解翻译成什么内容的好方法。还有一些可用的浏览器插件可以做到这一点。

【讨论】：

谢谢。你的回答和@edi9999 的工作，所以这是一个很难接受的决定！您正确地推断出我将量化存储在一个对象中，所以我将使用这个;-)。

【解决方案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 似乎是一个变量而不是一个属性。 Difference between properties and variables

【讨论】：