我发现了一个类似的问题，但没有任何答案（问题被否决了），所以我在这里：
我试图使用基于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>
);
}
}
最好/最简单的解决方案是拥有一个包含所需脚本的存根index.html文件（您可以按照其他人的建议从npm安装库，但是这仅适用于仅具有CDN的库）。因此，您将拥有一个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"></div>
</body>
</html>
然后是一个像这样的react组件（我已经移动了一些代码以更好地遵循一些react惯用法）：
var Component = React.createClass({
componentDidMount:function() {
greuler({
target: '#chart',
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()
}
render() {
return (
<div id="chart"></div>
);
}
}
ReactDOM.render(<Component />, document.querySelector('root'));
这是一个简单的解决方案，可以做更多的事情（例如使用react的状态和属性来传递参数），但这应该给出该解决方案的总体思路。此代码还假设您以某种方式（Babel，CDN等）包含了React和ReactDOM库。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句