Dart D3 Linie Paket JS mit

Question

Wir wollen Funktionen D3 (v4) Linie direkt (unter anderem) nennen von Dart, wie wir versuchen, es mit kantigem 2. verwenden Wir haben verschiedene Dinge ausprobiert, wie

• Dart D3-Bibliothek (https://github.com/rwl/d3.dart), aber es stellt die SVG-Linie nicht aus.

• Direkt JS Interop

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

Aber diese explodiert und ist sehr hässlich.

• Mit 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); 
  } 
  

  Diese meist gut zu funktionieren scheint, außer D3 Sie erfordert, um die ursprüngliche Funktion mit den Daten rufen Sie den Pfad zu erzeugen. Zum Beispiel müssen Sie die folgenden Schritte aus:

  var line = d3.line().x(function (d) { return d.x;}).y(function (d) { return d.y;}); 
  line([{x:10, y:20}]); 
  

Also haben wir auf:

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

• Ich habe auch versucht, diese Antwort: 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]]);

Was ist die empfohlene Vorgehensweise? Gibt es auch Anleitungen zur Verwendung von Angular 2 + D3 + Dart? Ich habe nur Typ-Skript gesehen, und das Übersetzen zwischen ihnen ist nicht die einfachste Sache auf der Welt.

Answer 1

Ich schaffte es, dies mit Js.dart arbeiten zu lassen. Der wichtige Teil ist eine Anruffunktion. Dadurch können Sie die Funktion direkt aufrufen, um Ihr Ergebnis zu erhalten, wie es in D3 der Fall ist.

Der Dart-Wrapper:

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

Die Funktion:

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