包仅在 window.onload 函数内有效
Posted
技术标签:
【中文标题】包仅在 window.onload 函数内有效【英文标题】：Package works only inside window.onload function 【发布时间】：2018-06-28 20:12:33 【问题描述】：我用 npm install d3 安装了 D3.js，所以现在有目录 node_modules 和 d3 包。现在在我的 js 文件中，我想使用 d3，而 d3 仅在 window.onload 函数内工作 例如：
更新
import * as d3 from "d3";
window.onload = function()
const sq = d3.selectAll('rect')
.attr("fill", "red");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vis</title>
<script src="node_modules/d3/build/d3.min.js"></script>
<script src='build/bundle.js'></script>
</head>
<body>
<svg >
<rect x="20" y="20" rx="5" ry="5" ></rect>
<rect x="60" y="20" rx="5" ry="5" ></rect>
<rect x="100" y="20" rx="5" ry="5"></rect>
</svg>
</body>
</html>这是我的 package-lock.json 的一部分，显示 d3 已安装：
“名称”：“可见”， “版本”：“1.0.0”， “锁定文件版本”：1， “需要”：是的，
“依赖”：
“d3”： “版本”：“4.12.2”， "已解决": "https://registry.npmjs.org/d3/-/d3-4.12.2.tgz", “完整性”：“sha512-aKAlpgTmpuGeEpezB+GvPpX1x+gCMs/phpuse6sCpkgw4Un3ZeqUobIc87eIy9adcl+wxPAnEyKyO5oulH3MOw==”， “要求”： "d3-array": "1.2.1", "d3 轴": "1.0.8", “d3-brush”：“1.0.4”， “d3 和弦”：“1.0.4”， "d3-collection": "1.0.4", "d3-color": "1.0.3", "d3-dispatch": "1.0.3", “d3-拖动”：“1.2.1”， “d3-dsv”：“1.0.8”， “d3-ease”：“1.0.3”， “d3-force”：“1.1.0”， “d3 格式”：“1.2.1”， “d3-geo”：“1.9.1”， “d3-层次结构”：“1.1.5”， “d3-interpolate”：“1.1.6”， “d3 路径”：“1.0.5”， “d3-多边形”：“1.0.3”， “d3-quadtree”：“1.0.3”， “d3 队列”：“3.0.7”， “d3-随机”：“1.1.0”， “d3-请求”：“1.0.6”， “d3-规模”：“1.0.7”， “d3-选择”：“1.2.0”， “d3 形状”：“1.2.0”， "d3-time": "1.0.8", “d3-时间格式”：“2.1.1”， “d3-timer”：“1.0.7”， “d3-过渡”：“1.1.1”， “d3-voronoi”：“1.1.2”， “d3-缩放”：“1.7.1”
【问题讨论】：
为什么会出现这个问题？ 现在您需要使用import 语句导入d3 模块或使用require.js 为AMD 或common.js 样式
@brk 即使使用 import 或 require 它也不起作用
@charlietfl 我不知道。我是初学者，我看到的教程没有使用它:))
在你对它做任何事情之前，你想要定位的元素必须存在。如果该代码在<head> 中，它将在元素存在之前运行，但它们在加载事件之后运行
【参考方案1】：
它不起作用可能，因为您使用的是 d3，例如d3.selectAll('rect') 操作 元素 尚未准备好。 window.onload 在所有资源完成加载并准备好使用时执行回调 - 这就是它工作的原因。
【讨论】：
【参考方案2】： <head>
<script charset="utf-8" src="/node_modules/d3/3.4.11/d3.min.js"></script>
</head>
<body>
<svg >
<rect x="20" y="20" rx="5" ry="5"></rect>
<rect x="60" y="20" rx="5" ry="5"></rect>
<rect x="100" y="20" rx="5" ry="5"></rect>
</svg>
<script type="text/javascript">
window.onload = function ()
const sq = d3.selectAll('rect')
.attr("fill", "red");
</script>
</body>
</html>
【讨论】：
以上是关于包仅在 window.onload 函数内有效的主要内容，如果未能解决你的问题，请参考以下文章