Category: D3.js

ランダムなテキストサイズ表示　d3.js

Math.floor(Math.random() * n+1)で28pxのランダム表示を実現しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>D3.js</title>
  </head>
  <body>
      <p>hello 1</p>
      <p>hello 2</p>
      <p>hello 3</p>
      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
      var p = d3.select("body").selectAll("p");

      p.style("font-size", function(){
        return Math.floor(Math.random() * 29) + "px";
      });
      </script>
  </body>
</html>

D3.js

D3.jsはData Driven Documentの略です。

D3.js

d3.jsのライブラリです。

<script src="https://d3js.org/d3.v4.min.js"></script>

要素を指定して、命令を書いていきます。

      <script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
      d3.select("body").selectAll("p").text("hello from d3");

      </script>

繋げて書くこともできます。

var p = d3.select("body").selectAll("p");
      p.text("hello from d3");
      p.style("font-size","28px");
      p.style("font-weight", "bold");