如何将 D3.js 与 Renderer API 与 Angular 2 集成

Question

如何将 D3.js 与 Renderer API 与 Angular 2 集成

我已经成功地将 Angular 2（Alpha 44）与 D3.js 集成：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>
      System.config({packages: {'app': {defaultExtension: 'js'}}});
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

应用程序.js：

/// <reference path="./../../typings/tsd.d.ts" />

import {Component, bootstrap, ElementRef} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  template: '<h1>D3.js Integrated if background is yellow</h1>',
  providers: [ElementRef]
})
class AppComponent { 
  elementRef: ElementRef;

  constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
  }

  afterViewInit(){
    console.log("afterViewInit() called");
    d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow");
  }
}
bootstrap(AppComponent);

Run Code Online (Sandbox Code Playgroud)

一切正常。但是 Angular 2 文档ElementRef说明如下：

当需要直接访问 DOM 时，将此 API 用作最后的手段。改用 Angular 提供的模板和数据绑定。或者，您可以查看Renderer哪些提供了即使在不支持直接访问本机元素的情况下也可以安全使用的 API。依赖于直接 DOM 访问会在您的应用程序和渲染层之间创建紧密耦合，这将导致无法将两者分开并将您的应用程序部署到 Web Worker 中。

现在的问题是如何将 D3.js 与RendererAPI集成？

Answer 1

Gün*_*uer 2

您还可以使用@ViewChild()（Angular 2：如何从组件控制 <video>）它不会有太大区别，因为这仍然是直接 DOM 访问，这将阻止服务器渲染和在 web-workers 中运行。但对于像 d3 这样的库来说，无论如何都是没有办法的。

归档时间：	9 年，10 月前
查看次数：	1495 次
最近记录：	7 年，11 月前