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]]);