极客观点
项目管理
HarmonyOS
我正在尝试使用一个基于 D3 构建的库，称为 Greuler，以动态呈现图形。它的 npm 包似乎被破坏了。当我切换到 Greuler CDN 时，我的 index.html 中的测试图终于起作用了。
但是，我正在开发 React 应用程序，我希望从 React 组件呈现图形。问题出现了：react 组件没有使用我的 index.html 中的 Greuler CDN 脚本，我已经尝试了多种在我的组件中运行脚本的方法，但似乎没有任何效果。
两个主要错误是：
error 'greuler' is not defined （在我的组件中）
Uncaught TypeError: Cannot read property 'getAttribute' of null （在D3代码中）
我的工作 index.html，带有硬编码图，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navigating Spinoza</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
</head>
<body>
<div id="root"></div>
<div class="row" id="demo">
<script>
var instance = greuler({
target: '#demo',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
</script>
</div>
</body>
</html>
我对组件中渲染函数的最后尝试看起来像：
render() {
return (
<div class="row" id="demo">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<script src="http://maurizzzio.github.io/greuler/greuler.min.js"></script>
{
greuler({
target: '#demo',
width: 480,
height: 500,
data: {
nodes: [
{id: 0, label: "E1Def3", r: 25},
{id: 1, label: "E1P4", r: 15},
{id: 2, label: "E1P2", r: 15},
{id: 3, label: "E1P1", r: 15},
{id: 4, label: "E1P5", r: 15},
{id: 5, label: "E1P6", r: 25}
],
links: [
{source: 0, target: 1, directed: true},
{source: 0, target: 2, directed: true},
{source: 0, target: 3, directed: true},
{source: 1, target: 4, directed: true},
{source: 2, target: 5, directed: true},
{source: 3, target: 4, directed: true},
{source: 4, target: 5, directed: true}
]
}
}).update()
}
</div>
</div>
);
}
}
原文由 jaimefps 发布，翻译遵循 CC BY-SA 4.0 许可协议
最好/最简单的解决方案是拥有一个存根 index.html 文件，其中包含您需要的脚本（您可以按照其他人的建议从 npm 安装库，但这适用于只有 CDN 的库）。因此，您将拥有一个
index.html文件，如下所示：然后是一个像这样的 React 组件（我已经移动了一些代码以更好地遵循一些 React 习语）：
这是一个简单的解决方案，可以做更多的事情（例如使用 React 的状态和属性来传递参数），但这应该给出解决方案的总体思路。此代码还假设您已经以某种方式（babel、CDN 等）包含了 React 和 ReactDOM 库。