Angular模板中使用d3-graphviz报pe.select非函数错误如何解决

pe.select is not a function 报错由两个典型的Angular使用误区导致：

• 直接把原生HTML示例的内联<script>代码粘贴到组件模板文件中，Angular编译模板时出于安全考虑会自动移除、忽略模板内的原生script标签，既不会执行标签内的代码，也不会将脚本内的变量注册到组件作用域
• 未按Angular的模块化规范引入d3相关依赖，即使在index.html中通过CDN全局挂载了d3对象，组件类中也无法直接获取到完整的d3实例，调用方法时自然会找不到select函数。

• 清理错误代码
  把dashboard.component.html里粘贴的所有script标签、内联d3调用代码全部删除，模板中只保留图形渲染容器即可：

  <div id="graph" style="text-align: center;"></div>
  

  如果你之前在index.html里加了三个d3相关的CDN script标签，也一并删掉，避免后续出现版本冲突。
• 安装本地依赖
  不要依赖CDN脚本引入，在项目根目录执行以下命令安装对应版本的依赖包：

  npm install d3@5 d3-graphviz@3.0.5 @hpcc-js/wasm@0.3.11
  npm install --save-dev @types/d3
  

• 在组件逻辑中正确调用渲染方法
  打开dashboard.component.ts，先在文件顶部引入依赖，再等视图初始化完成后执行渲染逻辑——必须等DOM节点渲染完成才能选择容器，否则也会报空节点错误：

  import { Component, AfterViewInit } from '@angular/core';
  import * as d3 from 'd3';
  import 'd3-graphviz';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html'
  })
  export class DashboardComponent implements AfterViewInit {
    ngAfterViewInit(): void {
      d3.select("#graph").graphviz()
        .renderDot('digraph  {a -> b}');
    }
  }
  

• 永远不要在Angular组件模板中写原生script标签，这类代码不会被执行，所有和DOM操作、业务逻辑相关的代码都要写在对应的.ts组件文件中
• 如果后续需要渲染动态更新的dot语法内容，不要把逻辑写死在ngAfterViewInit中，等绑定的数据准备完成、视图更新后再调用renderDot方法即可
• 如果运行时出现wasm文件加载失败的报错，去angular.json的build配置里把@hpcc-js/wasm的dist目录添加到assets资源配置中，确保编译后wasm文件能被正常访问。

内容的提问来源于stack exchange，提问作者mode_er