我正在尝试制作我的第一个web应用程序,当我试图将所有部分“粘合”在一起时遇到了一些问题。
我有三个文件:getdata.js-有一个函数main(),它对REST API进行一些调用,并操作数据并返回一个数组,其中包含准备使用的数据。 这本身就很好用。
renderchart.js-这使用d3库绘制带有图像的气泡图。
index.html-如下所示。。。
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device, initial-scale=1.0">
<title>D3.js</title>
<style>
.container {
width: 800px;
height: 800px;
}
.bar {
fill: #b2d8d8;
}
</style>
<script src="https://d3js.org/d3.v5.min.js" defer></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js" defer></script>
<script src="https://d3js.org/d3-quadtree.v1.min.js" defer></script>
<script src="https://d3js.org/d3-timer.v1.min.js" defer></script>
<script src="https://d3js.org/d3-force.v2.min.js" defer></script>
<script src="renderChart.js" defer></script>
</head>
<body>
<svg></svg>
</body>
</html>
如果我将数组中的som数据硬编码到renderchart.js中,并执行index.html,它将正确地呈现所有内容。 在执行index.html时,我现在想做的是首先运行getData.js中的main()方法来生成数据,并在renderchart.js中使用该数据。 我试着用谷歌搜索一个解决方案,但恐怕我的术语不够好,找不到一个正确的答案。
干杯/朱利叶斯
在其他脚本旁边添加
。 然后导出getData.js
中的main()
方法,然后您将能够从renderchart.js
文件调用它。