パッケージJSを使用するDart D3ライン

Question

DartからD3（v4）ライン関数を直接呼び出したいので、これをAngular 2で使用しようとしています。

• ダーツ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}]); 
  

だから我々はに着い：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]]);

：私もこの答えを試してみた

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

• これをお勧めする方法は何ですか？また、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]]);