我们想直接从Dart调用D3（v4）线函数（除其他功能外），因为我们试图将其与Angular 2一起使用。
直接JS互操作
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与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的任何指南吗？我只看过类型脚本，在它们之间进行翻译并不是世界上最容易的事情。
我设法使用Js.dart使其正常工作。重要的部分是具有调用功能。就像D3一样，这使您可以直接调用该函数以获取结果。
Dart包装器：
@JS('d3')
library d3;
import 'dart:js';
import "package:js/js.dart";
typedef num D3AccessorFunction(List<num> d, num i, List<List<num>> data);
Function d3AccessorFunction(D3AccessorFunction function) {
return allowInterop(function);
}
@JS('line')
class Line {
external Line();
external String call (List<List<num>> data);
external Line x(D3AccessorFunction function);
external Line y(D3AccessorFunction function);
}
@JS("arc")
class Arc {
external innerRadius([num innerRadius]);
external outerRadius([num outerRadius]);
external startAngle([num startAngleInRadians]);
external endAngle([num endAngleInRadians]);
external Arc();
external String call ();
}
功能：
Line line = new Line();
return line([[fromTo.x, fromTo.y], [endTo.x, endTo.y]]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句