Question

我正在尝试使用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'）单独使用时有效。当我在“代码检查器”中查看代码时，弹出窗口有一个元素。当我添加.selectAll（“。bar”）时，仅给出一个元素。

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

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

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

Answer 1

问题出在d3.v3中。下面的代码段对我有用。

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>

Answer 2

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

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

selectAll不选择D3上的任何节点

2 个答案: