可以用 CoffeeScript 编写 Protovis 代码吗?

发布于 10-16 19:41 字数 223 浏览 9 评论 0原文

我想使用 Protovis 创建可视化,但使用 CoffeeScript 而不是 JavaScript 编写(部分原因是 (x)->x 函数符号,但也有其他原因)

这可能吗?我将使用什么

谢谢。

编辑:如果可能的话,我想避免手动编译步骤。

I would like to create visualizations using Protovis, but writing in CoffeeScript rather than JavaScript (partly for the (x)->x function notation but other reasons as well)

Is this possible? What <script> tag would I use and is there any special order of script tags that are necessary?

Thanks.

Edit: I'd like to avoid a manual compilation step if possible.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

迎风吟唱2024-10-23 19:41:57

为了澄清一下这个问题:Protovis 代码是

<script type="text/javascript+protovis">

在包含 Protovis 库之后使用特殊标签编写的。但是,此代码必须内联到 HTML 中。浏览器无法识别 text/javascript+protovis 类型,因此它会忽略该标记; Protovis 找到它并读取标签包含的文本,而不尝试加载由 src 链接的任何文件。

Protovis为什么要这么做?因为它通过代码运行基于正则表达式的解析器,将 JavaScript 1.8 代码转换为 JavaScript 1.6 代码;这样,您就可以使用尖端的 JavaScript 功能,并且您的代码仍将在旧版浏览器中运行。非常酷。

虽然您当然可以编写 CoffeeScript 代码,对其进行编译,然后将其粘贴进去,但这将是一个非常乏味的构建过程。好消息是,您不太可能(不可能?)从 CoffeeScript 编译器中获得使用 JS 1.6 之外的任何功能的代码;其中大部分功能都以某种形式融入到 CoffeeScript 本身中。例如,数组推导式和匿名函数的缩写语法。这意味着您可以仅使用

<script type="text/javascript" src="myProtovisCode.js"></script>

已编译的 CoffeeScript 代码(或使用 text/coffeescriptcoffee-script.js 库进行开发)。

真正的技巧是将 Protovis 示例及其不熟悉的 JS 1.8 语法转换为 CoffeeScript。例如,

cell.add(pv.Dot)
    .def("x", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k0]).range(0, s))
    .def("y", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k1]).range(0, s))

使用缩写的 JS 1.8 匿名函数语法,其中 function(x) x * xfunction(x) { return x * x; 的简写; }。当然,这可以轻松转换为 CoffeeScript:

cell.add(pv.Dot)
    .def("x", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k0]).range(0, s))
    .def("y", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k1]).range(0, s))

如需进一步参考,请查看 Mozilla 文档中的 JavaScript 1.8 中的新功能( Firefox 是目前唯一原生支持 JS 1.8 的浏览器)。

To clarify the question a little: Protovis code is written using a special tag,

<script type="text/javascript+protovis">

after the Protovis library has been included. However, this code must be inlined with the HTML. The browser doesn't recognize the text/javascript+protovis type, so it simply ignores the tag; Protovis finds it and reads in the text the tag contains, without attempting to load any file linked by src.

Why does Protovis do this? Because it runs a regex-based parser through the code to convert JavaScript 1.8 code to JavaScript 1.6 code; that way, you can use cutting-edge JavaScript features, and your code will still run in older browsers. Very cool.

While you could certainly write CoffeeScript code, compile it, and then paste it in, that would make for a very tedious build process. The good news is that it's unlikely (impossible?) that you'll get code out of the CoffeeScript compiler that uses anything beyond JS 1.6 features; most of those features are baked, in some form, into CoffeeScript itself. For instance, array comprehensions, and an abbreviated syntax for anonymous functions. That means you can just use

<script type="text/javascript" src="myProtovisCode.js"></script>

for your compiled CoffeeScript code (or text/coffeescript with the coffee-script.js library, for development).

The real trick is translating the Protovis examples, with their unfamiliar JS 1.8 syntax, into CoffeeScript. For instance,

cell.add(pv.Dot)
    .def("x", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k0]).range(0, s))
    .def("y", function(k0, k1) pv.Scale.linear(flowers, function(d) d[k1]).range(0, s))

uses the abbreviated JS 1.8 anonymous function syntax, where function(x) x * x is shorthand for function(x) { return x * x; }. Of course, this translates easily to CoffeeScript:

cell.add(pv.Dot)
    .def("x", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k0]).range(0, s))
    .def("y", (k0, k1) -> pv.Scale.linear(flowers, (d) -> d[k1]).range(0, s))

For further reference, check out New in JavaScript 1.8 over at Mozilla's docs (Firefox being the only browser that natively supports JS 1.8 at present).

用心笑2024-10-23 19:41:57

最好仅出于开发目的而使用 CoffeeScript 编写,然后编译为纯 JS 以包含在

使用 -c 标志进行编译:

coffee -c someFile.coffee

输出将是同一目录中的 someFile.js

It's better to write in CoffeeScript for development purposes only, and then compile into plain JS to include in <script>.

Compile using the -c flag:

coffee -c someFile.coffee

The output will be someFile.js in the same directory.

只为守护你2024-10-23 19:41:57

好的,我已经对此进行了一些尝试,实际上我可以将 Protovis 与 Coffeescript 一起使用,使用

OK I've played with this a bit and I can in fact use Protovis with Coffeescript, using a <script type="text/coffeescript"> tag, which can optionally have an src="x.coffee" attribute. No external compilation required. Clearly this requires the browser to compile the Coffeescript to Javascript every time the page loads but for quick visualization tasks it works for me.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文