d3-intro.html

<a href="https://qiita.com/propella/items/7b05ad222cd3c0b86a24">D3.js https://d3js.org/ の勉強</a>
<div>
    <div class="num">One</div>
    <div class="num">Two</div>
    <div class="num">Three</div>
    <div class="num">Four</div>
</div>

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

 // まず https://d3js.org/ を読む
 
 // 一つの要素を選択してスタイルを設定

 d3.select(".num")
   .style("color", "red");
 
 // 全部の要素を選択してスタイルを設定

 d3.selectAll(".num")
   .style("font-size", "2em");

 // 要素を追加する事も出来る。

 d3.selectAll(".num")
   .append("span")
   .text(" apple")

 // 関数を使って動的にスタイルを設定

 d3.selectAll(".num")
   .style("background-color", (data, index) => `hsl(${30 * index}, 50%, 90%)`);

 // data を使って動的にスタイルを設定
 // DOM 要素の数と data の数が対応している部分を update selection と呼ぶ。

 d3.selectAll(".num")
   .data([1, 2, 3, 4])
   .style("margin-left", (data, index) => `${data}em`);

</script>

<hr />
<div class="fruitlist">
    <div class="fruit">Apple</div>
    <div class="fruit">Banana</div>
    <div class="fruit">Cherry</div>
</div>
<script>

 // Thinking with Joins: https://bost.ocks.org/mike/join/
 
 // DOM 要素より data の数が多い時、data の数が多い部分を enter selection と呼ぶ。
 // enter() で enter selection に要素を追加出来る。
 // append() でデータを追加するには selection.selectAll() を使って親要素から選択する必要が有る。https://github.com/d3/d3-selection#selection_selectAll

 d3.select(".fruitlist")
   .selectAll(".fruit")
   .data([1, 2, 3, 4, 5])
   .enter()
   .append("div")
   .text(d => `Extra fruit number ${d}`)

</script>

<hr />
<div>
    <div class="lunch">Burger</div>
    <div class="lunch">Hotdog</div>
    <div class="lunch">Curry</div>
    <div class="lunch">Pasta</div>
    <div class="lunch">Pizza</div>
</div>
<script>

 // DOM 要素より data の数が少ない時、data の数が少ない部分を exit selection と呼ぶ。
 // exit() で exit selection を削除出来る。

 d3.selectAll(".lunch")
   .data([1, 2, 3])
   .exit()
   .remove()

 // update, enter, exit を使うと、データを更新して画面を書き換える際に、すでに画面上にある DOM 要素を再利用出来る。
 // update で既存の DOM 要素を更新し、enter で新しく作成し、exit で不要な DOM 要素を削除するというのが共通の実装パターンとなる。
 // つまり、スムーズな画面更新や React.js の 仮想 DOM のようなパフォーマンス上の効果がある。
 
</script>

<hr />
<style>
 .chart div {
     background-color: powderblue;
     text-align: right;
     margin: 1px;
     transition: width 0.5s ease-in-out;
     animation: fade-in 0.5s ease 0s 1 normal;
 }
 @keyframes fade-in {
     0% { opacity: 0 }
     100% {opacity: 1 }
 }
</style>
<div class="chart"/>

<script>
 function barchart(data) {
     const chart = d3.select(".chart")
                     .selectAll("div")
                     .data(data)
                     .style("width", function(d) { return d + "px"; })
                     .text( d => d);
     
     chart.enter()
                   .append("div")
                   .style("width", function(d) { return d + "px"; })
                   .text( d => d)
     
     chart.exit().remove();
 }

 function updatebar() {
     ndata = Math.floor(Math.random() * 5) + 5; // [5, 10)
     data = d3.range(0, ndata).map(() => Math.floor(Math.random() * 300));
     barchart(data);
 }

 setInterval(updatebar, 1000);
</script>