3

恐怕我在如何将这个 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 函数，给我留下了这个：

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

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

4

2 回答 2

3

In your Javascript Code, quantize contains a value:

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

But in your CoffeeScript version, quantize is a function:

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

You should probably just do: 

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

so that quantize remains a function.

You should then remove the @ of the @quantize, that translates in Javascript to this.quantize, as quantize seem to be a variable and not a property. Difference between properties and variables

于 2013-07-18T15:00:11.557 回答
3

代替

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...and quantize(rateId.get(d.id))（没有@）。

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

于 2013-07-18T14:58:27.137 回答