為什么D3不創建svg元素-有解無憂

我不確定我做錯了什么，但我正在嘗試創建資料驅動的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，而我期望在rect里面看到 20 秒

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

    </svg>

上面的代碼回傳這個

為什么 D3 不創建 svg 元素

uj5u.com熱心網友回復：

將您的腳本 ( _d3.js) 移動到結束</body>標記之前。d3.select("svg")必須回傳一個空選擇，因為您的腳本在渲染之前開始執行，<svg>所以沒有svg選擇。（有關更多資訊，請參閱有關在何處包含腳本標簽的答案）

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/432258.html

標籤：javascript d3.js

上一篇：“物件”型別上不存在屬性“令牌”.ts(2339)

下一篇：y軸下方的條形圖出血D3.js