패키지 JS를 사용하는 다트 D3 라인

Question

다트에서 D3 (v4) 라인 함수를 직접 호출하고자하므로 각도 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}']);

그러나이 폭발하고 아주 추악한. 이 D3 경로를 생성하기 위해 데이터를 원래의 함수를 호출 할 필요를 제외하고, 대부분은 확실히 작동하는 것 같다 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); 
} 

를 사용

• .

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