0

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

<!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>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。