Dart D3 линия с использованием пакетом JS

Question

Мы хотим, чтобы вызвать D3 (v4) линейные функции непосредственно (в том числе) от Dart, как мы пытаемся использовать его с угловым 2. Мы пробовали различные вещи, такие как

• Dart D3 library (https://github.com/rwl/d3.dart), но не выставляет линию SVG.

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

Но это взрывает и очень некрасиво.

• Использование 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]]);