使用 d3-graphviz 导致无法读取 null 的 属性 '__graphviz__'
Using d3-graphviz results in can't read property '__graphviz__' of null
我只是想渲染一个 DOT 图。我已按照文档 (https://github.com/magjac/d3-graphviz) 添加包并使用它,但是当我尝试 运行 应用程序并访问 DOT 图时,没有任何渲染并抛出以下错误:
错误类型错误:无法读取空的 属性 '__graphviz__'。
console error message
app是一个Angular12项目这里是使用的依赖列表
"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(...)' 函数的所有不同尝试。
wasm文件夹已添加到项目所在目录
应用项目
-- node_modules
-- 源码
---- 应用程序
----资产
------ @hpcc-js
-------- wasm
更新:我找到了答案。抛出错误是因为在呈现图表时 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 图。我已按照文档 (https://github.com/magjac/d3-graphviz) 添加包并使用它,但是当我尝试 运行 应用程序并访问 DOT 图时,没有任何渲染并抛出以下错误:
错误类型错误:无法读取空的 属性 '__graphviz__'。 console error message
app是一个Angular12项目这里是使用的依赖列表
"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(...)' 函数的所有不同尝试。
wasm文件夹已添加到项目所在目录
应用项目
-- node_modules
-- 源码
---- 应用程序
----资产
------ @hpcc-js
-------- wasm
更新:我找到了答案。抛出错误是因为在呈现图表时 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>