Question

我用 npm install d3 安装了D3.js，所以现在有d3包的目录node_modules。现在在我的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：

{     “名字”：“vis”，     “版本”：“1.0.0”，     “lockfileVersion”：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-chord”：“1.0.4”，               “d3-collection”：“1.0.4”，               “d3-color”：“1.0.3”，               “d3-dispatch”：“1.0.3”，               “d3-drag”：“1.2.1”，               “d3-dsv”：“1.0.8”，               “d3-ease”：“1.0.3”，               “d3-force”：“1.1.0”，               “d3-format”：“1.2.1”，               “d3-geo”：“1.9.1”，               “d3-hierarchy”：“1.1.5”，               “d3-interpolate”：“1.1.6”，               “d3-path”：“1.0.5”，               “d3-polygon”：“1.0.3”，               “d3-quadtree”：“1.0.3”，               “d3-queue”：“3.0.7”，               “d3-random”：“1.1.0”，               “d3-request”：“1.0.6”，               “d3-scale”：“1.0.7”，               “d3-selection”：“1.2.0”，               “d3-shape”：“1.2.0”，               “d3-time”：“1.0.8”，               “d3-time-format”：“2.1.1”，               “d3-timer”：“1.0.7”，               “d3-transition”：“1.1.1”，               “d3-voronoi”：“1.1.2”，               “d3-zoom”：“1.7.1”             }

Answer 1

它不起作用可能，因为您使用的是d3，例如d3.selectAll('rect')来操纵尚未准备好的元素 。 window.onload在所有资源都已完成加载并准备好使用时执行回调 - 这就是为什么它可以工作的原因。

Answer 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>

包只能在window.onload函数

2 个答案: