使用js函数替换HTML文件中的纯文本
使用js函数替换HTML文件中的纯文本
提问于 2020-12-28 11:29:42
我正在尝试这个来自这里的图形可视化库。
他们提供了这个实验代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial Demo</title>
</head>
<body>
/* The container of the graph */
<div id="mountNode"></div>
/* Import G6 by CDN */
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.0/dist/g6.min.js"></script>
<script>
// Define the source data
const data = {
// The array of nodes
nodes: [
{
id: 'node1',
x: 100,
y: 200,
},
{
id: 'node2',
x: 300,
y: 200,
},
],
// The array of edges
edges: [
// An edge links from node1 to node2
{
source: 'node1',
target: 'node2',
},
],
};
// Instantiate a Graph
const graph = new G6.Graph({
container: 'mountNode', // The id of the container
// The width and height of the graph
width: 800,
height: 500,
});
// Load the data
graph.data(data);
// Render the graph
graph.render();
</script>
</body>
</html>我想切换这个代码部分：
nodes: [
{
id: 'node1',
x: 100,
y: 200,
},
{
id: 'node2',
x: 300,
y: 200,
},
],使用我在js文件上创建的函数，让我们将其称为test.js，它包括：
function getArr()
{
arr = [
{ id: 'node1', x: 100, y: 200 },
{ id: 'node2', x: 200, y: 200 },
]
return arr;
}因此，我改变了如下：
<script src="test.js">
// Define the source data
const data = {
// The array of nodes
nodes: getArr(),
// The array of edges
edges: [
// An edge links from node1 to node2
{
source: 'node1',
target: 'node2',
},
],
};但是，它不起作用。想必，我应该得到同样的结果，但我可能在这里遗漏了什么。
想知道怎么解决这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-28 11:43:48
下面的示例适用于我。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial Demo</title>
<script type="text/javascript" src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.0/dist/g6.min.js"></script>
<script type="text/javascript" src="save.js" ></script>
</head>
<body>
<div id="mountNode"></div>
<script>
const data = {
nodes: getArr(),
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 500,
});
graph.data(data);
graph.render();
</script>
</body>
</html>我的save.js是
function getArr(){
arr = [
{ id: 'node1', x: 100, y: 200 },
{ id: 'node2', x: 200, y: 200 }
];
return arr;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65476930
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号