Dart JS库，如何传递回调函数

我们正在尝试使用 Dart 包装器来包装 D3 (v4) 行生成器类https://pub.dartlang.org/packages/js https://pub.dartlang.org/packages/js。我们已经关注了https://github.com/google/chartjs.dart/ https://github.com/google/chartjs.dart/但在传递函数时遇到问题。

我们的包装看起来像这样：

@JS('d3')
library d3;

import 'dart:js';
import "package:js/js.dart";


@JS('line')
class Line {
  external Line();
  external String call (List<List<num>> data);
  external Line x(Function func);
  external Line y(Function func);
}

目前我们已经成功地使用以下方法让它工作：

Line line = new Line();
String path = line([[10, 20], [200, 250]]);

然而，我们想设置一个函数来访问 x 和 y 值。 我们尝试过使用：

Line line = new Line();
line.x(allowInterop((d) { return d[0]+10;}));
line([[10, 20], [200, 250]]);

这会产生堆栈跟踪：

JSFunction._apply (dart:js:1300)
#1      JSFunction.call (dart:js:1290)
#2      CardinalLine.path (package:dials/app_component.dart:42:16)
#3      _View_AppComponent2.detectChangesInternal (package:dials/app_component.template.dart:189:49)
#4      AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#5      DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#6      AppView.detectContentChildrenChanges (package:angular2/src/core/linker/view.dart:264:31)
#7      _View_AppComponent0.detectChangesInternal (package:dials/app_component.template.dart:118:10)
#8      AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#9      DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#10     AppView.detectViewChildrenChanges (package:angular2/src/core/linker/view.dart:270:28)
#11     AppView.detectChangesInternal (package:angular2/src/core/linker/view.dart:259:10)
#12     AppView.detectChanges (package:angular2/src/core/linker/view.dart:247:10)
#13     DebugAppView.detectChanges (package:angular2/src/core/linker/view.dart:367:26)
#14     ViewRef_.detectChanges (package:angular2/src/core/linker/view_ref.dart:123:16)
#15     ApplicationRef_.tick.<anonymous closure> (package:angular2/src/core/application_ref.dart:443:63)
#16     List.forEach (dart:core-patch/growable_array.dart:254)
#17     ApplicationRef_.tick (package:angular2/src/core/application_ref.dart:443:32)
#18     ApplicationRef_._loadComponent (package:angular2/src/core/application_ref.dart:414:10)
#19     ApplicationRef_.bootstrap.<anonymous closure> (package:angular2/src/core/application_ref.dart:401:12)
#20     ApplicationRef_.run.<anonymous closure> (package:angular2/src/core/application_ref.dart:366:26)

这似乎是在尝试将参数传递给某些东西时发生的：

ORIGINAL EXCEPTION: V8 Exception(anonymous function) @ VM3533:1
VM3533:1 ORIGINAL STACKTRACE:(anonymous function) @ VM3533:1

其中 VM3533 是：

(function() {
    var func = this;
    return function() {
        return func(Array.prototype.slice.apply(arguments));
    }
    ;
}
)

传递的参数是：

[[MutationRecord], MutationObserver]

其中突变记录包括：

0: MutationRecord
addedNodes: NodeList[0]
attributeName: "hidden"
attributeNamespace: null
nextSibling: null
oldValue: null
previousSibling: null
removedNodes: NodeList[0]
target: div
type: "attributes"
__proto__: MutationRecord
length: 1
__proto__: Array[0]

我们尝试了很多变体，包括遵循 Chartjs 示例，但它们都以相同的堆栈跟踪结束。这样做的正确方法是什么？

所以事实证明该函数被正确附加和调用，问题在于我定义了仅使用一个变量 d 调用的 x 方法。

这就是大多数 D3 访问器函数在 JavaScript 中的定义方式，您只关心当前正在修改的数据片段。然而D3总是传递三个变量，即数据块d, 索引i，以及整个数据集data。 JavaScript 并不关心该函数是否接受额外的参数，它只是使用一个参数来调用它。然而达特does小心，并且会抛出一个不稳定的错误，表明由于参数过载而无法应用该函数。这是VM3533 中发生的异常。

抛出的异常非常模糊，如果不调试 JavaScript 就很难看到。

因此，正确的解决方案是确保当您定义将从 JavaScript 调用的函数时，该函数具有在此上下文中调用时所使用的确切参数数量。

在这种情况下：

Line line = new Line();
line.x(
    allowInterop(
        (List<num> d, num i, List<List<num>> data) {
            return d[0]+10;
        }
    )
);
return line([[10, 20], [30, 40]]);