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

【问题标题】：how to integrate D3.js with the Renderer API's with Angular 2如何将 D3.js 与 Renderer API 与 Angular 2 集成
【发布时间】：2016-04-14 17:39:23
【问题描述】：

我已成功将 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>

app.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);

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

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

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

【问题讨论】：

你有时间看这个视频：用 Angular2 和 TypeScript 创建 d3 组件 (youtube.com/watch?v=x296y5mErWI) 吗？
Using D3.js with Angular 2的可能重复

标签： javascript angular d3.js

【解决方案1】：

您也可以使用@ViewChild() (Angular 2: how control <video> from component) 这不会有太大区别，因为这仍然是直接的 DOM 访问，这将阻止服务器渲染和在 web-workers 中运行。但是对于像 d3 这样的库，无论如何都没有办法。

【讨论】：

我同意。这是最后一种情况，您唯一的选择是直接访问 DOM