jai*_*fps 9 javascript cdn d3.js reactjs
我发现了一个类似的问题,但是没有理解任何答案(并且问题被低估了)所以我在这里:
我正在尝试使用基于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'));
这是一个简单的解决方案，可以做更多的事情（例如使用反应的状态和属性来传递参数），但这应该给出解决方案的总体思路。此代码还假设您已以某种方式（babel、CDN 等）包含了 React 和 ReactDOM 库。
| 归档时间： |
|
| 查看次数： |
10161 次 |
| 最近记录： |