Angularjs 使用JS包的Dart D3线

我们希望直接从Dart调用D3（v4）直线函数（以及其他函数），因为我们试图将其用于Angular 2。我们尝试过各种方法，比如

• Dart D3库（）但它不公开SVG行
• 直接JS互操作

  var line=context['d3']['svg'].callMethod（'line'）.callMethod（'x'），[new JsFunction.withThis（（jsThis）{
  返回10；
  })]).callMethod（'y'，[new JsFunction.withThis（（jsThis））{
  返回20；
  })]);
  行。应用（['{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?

• 我也尝试过这个答案：

  vard3=context['d3']；
  var line=d3.line（）.x（（jsThis）{return 20；}）.y（（jsThis）{return 20；}）；
  返回线（[[10,20]]）
  

---

推荐的方法是什么？另外，你们有使用角度2+D3+省道的指南吗？我只见过类型脚本，在它们之间进行转换并不是世界上最容易的事情。

我使用Js.dart成功地实现了这一点。重要的是要有一个调用函数。这允许您直接调用函数以获得结果，就像D3一样

省道包装器：

@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 ();
}

---

虽然我已经设法解决了这个特殊的问题，但如果有人有更好的解决方案，请发布，我会接受。你发布了你的Dart包装库吗？如果可能的话，我有兴趣重新使用它。不，我们没有。我刚刚修改了答案，以说明我们的目的。从这一点开始，这种模式很快就会扩展，但我们可能不会沿着这条路走下去。

Line line = new Line();
return line([[fromTo.x, fromTo.y], [endTo.x, endTo.y]]);