Dart D3 line使用Package JS

Question

我们希望直接从Dart调用D3（v4）行功能，因为我们试图将它与Angular 2一起使用。我们尝试了各种方法，如

• Dart D3库（https://github.com/rwl/d3.dart）但它不暴露SVG线。

• 直接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 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的指南？我只看过类型脚本，在它们之间翻译并不是世界上最简单的东西。

Answer 1

我设法让这个工作使用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(); 
} 

功能：

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