Question

我们想直接从Dart调用D3（v4）行函数，因为我们正在尝试将它与Angular 2一起使用。我们尝试了各种各样的东西，比如

Dart D3库（https://github.com/rwl/d3.dart）但它没有暴露SVG线。
Direct JS Interop

var line = context['d3']['svg'].callMethod('line').callMethod('x', [new JsFunction.withThis((jsThis) { return 10; })]).callMethod('y', [new JsFunction.withThis((jsThis) { return 20; })]); line.apply(['{x:10, y:50}']);

但这会爆炸并且非常难看。

使用Js.dart

@JS('d3')
library d3;

import 'dart:html';

import "package:func/func.dart";
import "package:js/js.dart";


@JS('line')
class Line {
  external Line();
  external String (var data);
  external Line x(Function func);
  external Line y(Function func);
}

这似乎很有效，除了D3要求你用数据调用原始函数以生成路径。例如，您需要以下内容：

var line = d3.line().x(function (d) { return d.x;}).y(function (d) { return d.y;});
line([{x:10, y:20}]);

所以我们得到：

   Line line = new Line();
   line.x(allowInterop((blah) { return 10;}));
   line.y(allowInterop((blah) { return 10;}));
   line.apply([[10, 20]]); //What goes here?

我也尝试过这个答案：Dart js interop with D3

var d3 = context['d3']; var line = d3.line().x((jsThis) { return 20;}).y((jsThis) { return 20;}); return line([[10, 20]]);

建议的方法是什么？另外，你有使用Angular 2 + D3 + Dart的指南吗？我只看过类型脚本，在它们之间进行翻译并不是世界上最简单的事情。

Dart D3系列使用Package JS

0 个答案: