JSFiddle - React, Tailwind, and code Playground

by madobon

HTML

<!-- <div class="bar"></div> -->
<svg>
<rect x="0" y="0" width="30" height="30" fill="purple"/>
   <rect x="20" y="5" width="30" height="30" fill="blue"/>
   <rect x="40" y="10" width="30" height="30" fill="green"/>
   <rect x="60" y="15" width="30" height="30" fill="yellow"/>
   <rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>
<svg>
    <rect x="0" y="0" width="500" height="50"/>
    <!-- 長方形 -->
</svg>
<svg>
    <circle cx="250" cy="30" r="25" fill="red" stroke="blue" stroke-width="5"/>
    <!-- 円 -->
</svg>
<svg>    
    <ellipse cx="250" cy="25" rx="50" ry="25" />
    <!-- 楕円 -->
</svg>
<svg>
    <line x1="0" y1="0" x2="500" y2="50" stroke="black" />
    <!-- 線 -->
</svg>
<svg></svg>
<div id="kamata"></div>
<ul>
    <li>d3.select("body") ? DOM の中から body を見つけ、その参照をチェインの次のステップに渡します。</li>
    <li>.selectAll("p") ? DOM 要素のすべてのパラグラフ要素を選択します。ここでは該当する要素が存在しないため、メソッドは空のセレクションを返します。この空のセレクションは、すぐ後に作られるパラグラフ要素を表したものだと理解してください。</li>
    <li>enter() は新規にプレースホルダ（※）要素を生成し、そのプレースホルダへの参照をチェインの次のステップに渡します。</li>
    <li>data()メソッドを呼ぶことで、その後にチェインされたメソッドの中で、d を入力値として受け取れる無名関数が使えるようになるのです。</li>
    <li>attr() は、要素の HTML 属性とその値を設定するために用います。</li>
    <li>classed() メソッドを使うと、（複数の）要素に簡単にクラスを追加したり削除することができます。</li>
</ul>

CSS

div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    /* この数値は実行時に上書きされます */
    background-color: teal;
    margin-right: 2px;
}
li {
    padding: 10px;
}

JavaScript

//-------------仏陀の聖域----------------
var dataset = [];
for (var i = 0; i < 25; i++) {
    var newNumber = Math.random() * 30;
    dataset.push(newNumber);
}

d3.select("#kamata").selectAll( /*要素選択 (divは下で作成)*/ "div")
    .data(dataset)
    .enter()
    .append( /*要素作成*/ "div")
    .attr("class", "bar")
    .style("height", function (d) {
    var barHeight = d * 5; // 高さを 5 倍にします
    return barHeight + "px";
});

/*
   .text(function(hori) { return hori; })
   .style("color", function(kamata){
      // datasetが渡ってくる
      console.log(kamata);
      if (kamata < 20) {
          return 'blue';
      }
      return 'yellow';
   });
*/
// console.log(d3.selectAll("p"));