Question

我正在尝试在AngularDart中使用一个简单的d3.js代码段。我有一个简单的组件：

@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()：

递归地将类似JSON的Dart对象集合转换为JavaScript对象的集合，并向其返回JsObject代理。

object必须是Map或Iterable，其内容也会被转换。 Maps和Iterables被复制到新的JavaScript对象。基元和其他可传输值直接转换为JavaScript类型，所有其他对象都被代理。

致电时：

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

根据API reference for dart:js：

，您不需要.jsify元素

代理和自动转换   在JsObject上设置属性或将参数传递给Javascript方法或函数时，Dart对象会自动转换或代理到JavaScript对象。访问JavaScript属性时，或者从JavaScript调用Dart闭包时，JavaScript对象也会转换为Dart。

函数和闭包的代理方式是可调用的。分配给JavaScript属性的Dart闭包由JavaScript中的函数代理。从Dart访问的JavaScript函数由JsFunction代理，JsFunction有一个apply方法来调用它。

以下类型直接传输而非代理：


“基本”类型：null，bool，num，String，DateTime

斑点

事件

的HTMLCollection

的ImageData

KeyRange的

节点

节点列表

TypedData，包括其子类，如Int32List，但不包括ByteBuffer

窗口

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

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

1 个答案: