selectAll 不选择 D3 上的任何节点答案

【问题标题】：selectAll not selecting any nodes on D3selectAll 不选择 D3 上的任何节点
【发布时间】：2018-09-21 10:53:54
【问题描述】：

我正在尝试使用 d3 selectAll 函数选择 4 个 div，但没有选择任何内容。这段代码中的高度永远不会改变：

var popop = d3.select("#chart")
    .selectAll(".bar");

popop.style("height", "40px");

<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="utf-8">
    <script src="../lib/d3.v3.min.js"></script>
    <script src="project1.js"></script>
    <style>
        .bar {
            float: left;
            width: 30px;
            margin-right: 20px;
            border-color: #F4F5F7;
            border: 1px solid #C5C5C5;
        }
        #chart {
            width: 100%;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="chart">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>

</body>
</html>

select('#chart') 单独使用时有效。当我查看 Code Inspector 中的代码时，popop 有一个元素。当我添加 .selectAll(".bar") 时，只给出一个元素。

当我在 Stack Overflow 上的浏览器中运行它时，我得到的结果与我的本地代码相同。只有四个小的水平线。当您将鼠标悬停在它们上方时，它们的高度为 0。

当我在 Stack Overflow 上运行 Aagam Jain 的代码时，它可以工作！！！当我在本地复制 Aagam 的代码时，它不起作用。包括从网站下载 d3.v3。

在 Firefox 和 Chrome 中尝试过并得到相同的结果。

【问题讨论】：

简短回答：执行脚本时，<body> 元素尚未准备好。有关详细的答案和解决方法，请查看"Where should I put <script> tags in HTML markup?"。
再次阅读我上面的评论；这是的解决方案。您的 sn-p 没有运行有两个原因：1）您没有包含 d3，因为它指的是本地副本。 2）你把JS代码放在CSS部分。如果您更正这两点，它就会运行，因为 JS 代码被插入到 body 元素的底部，就像上面链接的答案更详细地解释了一样。
我在底部添加了评论。有效。非常感谢你。我已经盯着这段代码8个小时了。我欠你一个！！

标签： javascript css d3.js

【解决方案1】：

问题在 d3.v3 中。以下 sn-p 对我有用。

d3.select('#chart').selectAll('.bar').style('height', '40px')

<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
    <style>
        .bar {
            float: left;
            width: 30px;
            margin-right: 20px;
            border-color: #F4F5F7;
            border: 1px solid #C5C5C5;
        }
        #chart {
            width: 100%;
            height: 300px;
        }
    </style>

</head>

<body>

    <div id="chart">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>

</body>
</html>

【讨论】：

感谢两位的回复。他们有点帮助。发生了一些非常奇怪的事情。我已经在上面扩展了我的问题......

【解决方案2】：

这是一个时间问题。如果我推迟脚本（所以它们在所有内容加载后运行，然后按顺序运行）就像我的问题中 comments 中提到的那样，一切正常：

<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./project1.js" defer></script>

【讨论】：