D3js/Javascript with Dart

我在學習關於web開發的知識，並選擇了Dart作爲一種繼續的方式（坦白地說沒有其他理由，除了它對我來說更有意義，來自Python/Java背景！）。我感興趣的是可視化和科學編程（我每天都使用Python堆棧工作和播放）。我正在嘗試使用聚合物，Dart和D3.js（在工作時教我自己）構建一個基本應用程序。有人能給我一個完整的分步基本例子。特別說明如何正確地包含像d3.js這樣的外部庫？D3js/Javascript with Dart

來源

2014-03-28 Rahuketu86

[This question]（http://stackoverflow.com/questions/13533207/dart-js-interop-with-d3）可能會有所幫助。 –

我已經看到了這個答案，但我無法弄清楚：-1。）如何定義上下文。 2.）如何/在哪裏加載聚合物成分中的d3.min.js？ – Rahuketu86

就像包含D3.js這樣的外部庫而言，你只需要將它作爲腳本包含在HTML中（無論是在頭部還是在關閉body標籤之前）。在Dart代碼之前，D3.js庫需要包含在HTML中，所以Dart可以看到它。

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
<script src="yourDartApp.dart" type="application/dart"></script>

然後，在你的飛鏢腳本的頂部，導入庫稱爲鏢：JS

import 'dart:js';

之後，每一個頂級JS對象（在窗口範圍內）提供給您的

context['someJSObject'];

返回的實例鏢的JsObject

要調用一個實現方法具在那個JsObject上，你可以使用callMethod方法。若要從D3.js網站重寫一個例子

d3.selectAll("p").style("color", function() { 
    return "hsl(" + 10 * 360 + ",100%,50%)"; 
});

它會是這個樣子的飛鏢

context['d3'].callMethod('selectAll', ['p']).callMethod('style', ['color', 
    new JsFunction.withThis((jsThis) { 
    // You are writing Dart code, which will be translated into JS here 
    return "hsl(" + 10 * 360 + ", 100%, 50%)"; 
    }) 
]);

我建議你考慮看看達特JsObject和JsFunction的API有一個更深入的瞭解從Dart使用JS。

雖然我不能幫助你與聚合物。還沒有嘗試過。

來源

2014-03-29 21:55:53

D3js/Javascript with Dart

回答

相關問題