

最近プログラミングをはじめ、D3.jsの勉強をしている者です。  
スケーラブルなバーチャートを作成したく、下記のコードを書いたのですが表示がされません。  
同一コード内で試しに書いた散布図は表示されるのですが。どなたか原因を教えていただけませんでしょうか。  
d3 v7.8.4 を使っています。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <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>D3 Page Template</title>
       <script type="text/javascript" src="d3.js"></script>
    </head>
    
    <body>
       <script type="text/javascript">
          //Width and height
          const w = 800;
          const h = 300;
          const barPadding = 10;
    
          const dataset = [];
          for (let i = 0; i < 20; i++) {
             let newNumber = Math.floor(Math.random() * 30);
             dataset.push(newNumber);
          }
    
          //Create SVG element
          const svg = d3.select("body")
             .append("svg")
             .attr("width", w)
             .attr("height", h);
    
          const xBarScale = d3.scaleBand()
             .domain(d3.range(dataset.length))
             .range([0, w])
             .padding(0.05);
    
          const yBarScale = d3.scaleLinear()
             .domain([0, d3.max(dataset)])
             .range([barPadding, h - barPadding]);
    
          svg.selectAll("rect")
             .data(dataset)
             .enter()
             .append("rect")
             .attr("x", function (d, i) {
                return xBarScale[i];
             })
             .attr("y", function(d, i){
                return h - yBarScale[d];
             })
             .attr("width", xBarScale.bandwidth())
             .attr("height", function (d) {
                return yBarScale[d];
             })
             .attr("fill", function (d) {
                return "rgb(0, 0, " + Math.round(d * 20) + ")";
             });
     
       </script>
    </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2023-05-10T01:29:58.333
94796
2023-05-10T01:29:58.333
54739
question
javascript d3.js
D3.jsでバーチャートが表示できない