包仅在 window.onload 函数内有效答案

【问题标题】：Package works only inside window.onload function包仅在 window.onload 函数内有效
【发布时间】：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 width="300px" height="150px">
    <rect x="20" y="20" width="20px" height="20" rx="5" ry="5" ></rect>
    <rect x="60" y="20" width="20px" height="20" rx="5" ry="5" ></rect>
    <rect x="100" y="20" width="20px" height="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> 中，它将在元素存在之前运行，但它们在加载事件之后运行

标签： javascript d3.js import package node-modules

【解决方案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 width="300px" height="150px">
            <rect x="20" y="20" width="20px" height="20" rx="5" ry="5"></rect>
            <rect x="60" y="20" width="20px" height="20" rx="5" ry="5"></rect>
            <rect x="100" y="20" width="20px" height="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>

【讨论】：