使用 d3-graphviz 导致无法读取 null 的属性“__graphviz__”[重复]答案

【问题标题】：Using d3-graphviz results in can't read property '__graphviz__' of null [duplicate]使用 d3-graphviz 导致无法读取 null 的属性“__graphviz__”[重复]
【发布时间】：2022-01-27 20:10:26
【问题描述】：

我只是想渲染一个 DOT 图。我已按照文档 (https://github.com/magjac/d3-graphviz) 添加包并使用它，但是当我尝试运行应用程序并访问 DOT 图时，没有任何渲染，并引发以下错误：

错误类型错误：无法读取 null 的属性“__graphviz__”。 console error message

该应用是一个 Angular 12 项目，这里是使用的依赖项列表

"dependencies": {
    "@angular/animations": "^12.1.4",
    "@angular/cdk": "^12.1.4",
    "@angular/common": "^12.0.5",
    "@angular/compiler": "^12.0.5",
    "@angular/core": "^12.1.4",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/forms": "^12.0.5",
    "@angular/material": "^12.1.4",
    "@angular/platform-browser": "^12.0.5",
    "@angular/platform-browser-dynamic": "^12.0.5",
    "@angular/router": "^12.0.5",
    "angular2-uuid": "^1.1.1",
    "chart.js": "^3.5.0",
    "d3": "^7.0.0",
    "d3-graphviz": "^4.0.0",
    "git-describe": "^4.0.4",
    "monaco-editor": "^0.26.1",
    "ng2-charts": "^3.0.0-rc.4",
    "ngx-monaco-editor": "^12.0.0",
    "ngx-toastr": "^14.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.0.5",
    "@angular-eslint/builder": "12.2.0",
    "@angular-eslint/eslint-plugin": "12.2.0",
    "@angular-eslint/eslint-plugin-template": "12.2.0",
    "@angular-eslint/schematics": "12.3.1",
    "@angular-eslint/template-parser": "12.2.0",
    "@angular/cli": "^12.1.4",
    "@angular/compiler-cli": "^12.0.5",
    "@types/chart.js": "^2.9.34",
    "@types/d3": "^7.0.0",
    "@types/d3-graphviz": "^2.6.7",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.20.17",
    "@typescript-eslint/eslint-plugin": "^4.28.5",
    "@typescript-eslint/parser": "^4.28.5",
    "eslint": "^7.31.0",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-prettier": "^3.4.0",
    "jasmine-core": "~3.7.0",
    "karma": "^6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "prettier": "2.3.2",
    "source-map-explorer": "^2.5.2",
    "typescript": "^4.2.4"
  }

ngOnInit 内部：

ngOnInit(): void {
    wasmFolder('/assets/@hpcc-js/wasm/dist/');
    console.log('file-viewer init');
}

代码查看它所提交的文件的文件名，并根据扩展名进行操作。当我们有一个 DOT 文件时，我们会执行以下操作：

else if (originalFile.filename.toLocaleLowerCase().includes('.dot')) {
      console.log('dot file was given');
      // this.activeType = TypeCode.DOT;
      // this.dotRenderer.renderDot(contents);
      // d3.select('#dotViewerElement').graphviz().renderDot(contents);
      graphviz('#dotViewerElement').renderDot(contents);
      // graphviz.graphviz('#dotViewerElement').renderDot(contents);
    }

注释行是访问“renderDot(...)”函数的所有不同尝试。

wasmFolder 已添加到位于的项目目录中

应用项目

-- 节点模块

-- 源代码

---- 应用程序

---- 资产

------@hpcc-js

-------- 原形

【问题讨论】：

标签： angular graphviz d3-graphviz

【解决方案1】：

更新：我找到了答案。由于在渲染图表时尚未渲染 dom 对象 (div)，因此引发了错误。当我使用 ngAfterViewInit 而不是 ngOnInit 时，它可以工作！

我也面临同样的问题。如果我不使用打字稿，而只是将脚本标签和示例脚本复制到我的 html 文件的正文中（因此替换 Angular 应用程序根目录）它工作正常，但如果我在正文中与我的应用程序根目录一起使用它抛出此错误。您是否找到了解决方案？

举个例子：

这适用于我的 index.html

<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>

d3.select("#graph").graphviz()
    .renderDot('digraph  {a -> b}');

</script>

这不起作用：

<head>
  <script src="//d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/@hpcc-js/wasm@1.12.8/dist/index.min.js"></script>
  <script src="https://unpkg.com/d3-graphviz@4.0.0/build/d3-graphviz.js"></script>
  <script>
    d3.select("#graph").graphviz()
    .renderDot('digraph  {a -> b}');
</script>
</head>
<body>
  <div id="graph" style="text-align: center;"></div>
  <app-root></app-root>
</body>

【讨论】：

所以，我们实际上转移到了服务器端解决方案，我们是否提前渲染 DOT 文件并将其作为 SVG 传递到前端。我查看了您的答案，这似乎是一个合理的解决方案。并且为了不留下未回答的问题。我会接受你的。但这只是对任何将来可能会遇到此问题的人的免责声明。我们没有测试答案。 里程可能会有所不同感谢@Ruud 对陈旧问题的回复。