d3.js - dartlang interop js 和 d3 集成在 dart 中不起作用

Question

我试图得到一个简单的d3.js在 AngularDart 中工作的代码片段。我有一个简单的组件:

@NgComponent(...)
class LineChart {
  Element element;
  List<num> _items;
  var d3;

  @NgOneWayOneTime('data')
  set results ( List<num> results ) {
    _items = results;
    _drawLineChart(_items);
  }

  LineChart(this.element) {
    d3 = context['d3'];
    var temp = d3.callMethod('selectAll', [new JsObject.jsify([element])]);
    var temp1 = temp.callMethod('append', ['div']);
    temp1.callMethod('html', ['Hello Me']);
  }
}

我收到以下错误 temp1应该创建变量。不知道我做错了什么。我用了 this教程作为引用。

NotFoundError: An attempt was made to reference a Node in a context where it does not exist.

STACKTRACE:
#0      JsObject._callMethod (dart:js:235)
#1      JsObject.callMethod (dart:js:225)
#2      JsObject.callMethod (dart:js:228)

Answer 1

According to the Dart API reference for JsObject.jsify() :

Recursively converts a JSON-like collection of Dart objects to a collection of JavaScript objects and returns a JsObject proxy to it.

object must be a Map or Iterable, the contents of which are also converted. Maps and Iterables are copied to a new JavaScript object. Primitives and other transferrable values are directly converted to their JavaScript type, and all other objects are proxied.

你打电话时:

var temp = d3.callMethod('selectAll', [new JsObject.jsify([element])]);

你不需要 .jsify元素因为，根据 API reference for dart:js :

Proxying and automatic conversion When setting properties on a JsObject or passing arguments to a Javascript method or function, Dart objects are automatically converted or proxied to JavaScript objects. When accessing JavaScript properties, or when a Dart closure is invoked from JavaScript, the JavaScript objects are also converted to Dart.

Functions and closures are proxied in such a way that they are callable. A Dart closure assigned to a JavaScript property is proxied by a function in JavaScript. A JavaScript function accessed from Dart is proxied by a JsFunction, which has a apply method to invoke it.

The following types are transferred directly and not proxied:

• "Basic" types: null, bool, num, String, DateTime
• Blob
• Event
• HtmlCollection
• ImageData
• KeyRange
• Node
• NodeList
• TypedData, including its subclasses like Int32List, but not ByteBuffer
• Window

Element继承自 Node并自动转换。所以你只需要调用:

var temp = d3.callMethod('selectAll', [element]);

你也不需要创建临时变量，因为 dart 有快捷方式!你可以这样做:

LineChart(this.element) {
  d3 = context['d3'];
  d3.callMethod('selectAll', [element])
    .callMethod('append', ['div'])
    .callMethod('html', ['Hello Me']);
}