如何将 D3.js 与 Renderer API 与 Angular 2 集成
Posted
技术标签:
【中文标题】如何将 D3.js 与 Renderer API 与 Angular 2 集成【英文标题】：how to integrate D3.js with the Renderer API's with 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的可能重复 【参考方案1】：您也可以使用@ViewChild() (Angular 2: how control <video> from component)
这不会有太大区别，因为这仍然是直接的 DOM 访问，这将阻止服务器渲染和在 web-workers 中运行。但是对于像 d3 这样的库，无论如何都没有办法。
【讨论】：
我同意。这是最后一种情况，您唯一的选择是直接访问 DOM以上是关于如何将 D3.js 与 Renderer API 与 Angular 2 集成的主要内容，如果未能解决你的问题，请参考以下文章
将 D3.js 7.0.0 与 Next.js 11.0.1 一起使用时，如何解决“[ERR_REQUIRE_ESM]：必须使用导入来加载 ES 模块”？