为什么 D3 不创建 svg 元素

Question

我不确定我做错了什么，但我正在尝试创建数据驱动 svg <rect>。代码如下

var x = [];
for (var i = 0; i < 20; i++) {
    x.push(Math.floor(100 * Math.random()));
};
const newData = x;

const s1 = d3.select("svg")
    .selectAll("rect")
    .data(newData)
    .enter()
    .append("rect")
    .attr("width", (d, i) => { return d })
    .attr("y", (d, i) => { return i * 50 })
    .attr("x", 0)
    .attr("height", 40)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>
    <link rel="stylesheet" href="style.css">
    </link>
    <script src="_d3.js"></script>
    <nav>
        <h1>Hello Reader</h1>
        <h2>Day1</h2>
        <p>Monday</p>
        <h2>Day2</h2>
        <p>Tuesday</p>
        <h2>Day3</h2>
        <p>Wednesday</p>
        <h2>Day4</h2>
        <p>Thursday</p>
    </nav>
    <main>
        <h1>Current Period</h1>

        <svg width="900" height="600">

        </svg>

        <h1>YTD</h1>

    </main>


</body>

</html>

但是，上面的代码根本没有创建任何 rect 而我期望在

中看到 20 rects

<svg width="900" height="600">

    </svg>

上面的代码returns这个

Answer 1

将您的脚本 (_d3.js) 移动到结束 </body> 标记之前。 d3.select("svg") 必须返回一个空的 selection，因为您的脚本在呈现 <svg> 之前开始执行，所以没有 svg 到 select。（有关更多信息，请参阅此 answer 关于在何处包含您的脚本标签）

var x = []
for (var i = 0; i < 20; i++) {
  x.push(Math.floor(100 * Math.random()))
}
const newData = x

const s1 = d3
  .select('svg')
  .selectAll('rect')
  .data(newData)
  .enter()
  .append('rect')
  .attr('width', (d, i) => {
    return d
  })
  .attr('y', (d, i) => {
    return i * 50
  })
  .attr('x', 0)
  .attr('height', 40)

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

<body>
  <nav>
    <h1>Hello Reader</h1>
    <h2>Day1</h2>
    <p>Monday</p>
    <h2>Day2</h2>
    <p>Tuesday</p>
    <h2>Day3</h2>
    <p>Wednesday</p>
    <h2>Day4</h2>
    <p>Thursday</p>
  </nav>
  <main>
    <h1>Current Period</h1>

    <svg width="900" height="600"></svg>

    <h1>YTD</h1>
  </main>
  <script src="_d3.js"></script>
</body>

</html>

为什么 D3 不创建 svg 元素

Why D3 is not creating svg elements

javascript

d3.js