Upgrade to Pro — share decks privately, control downloads, hide ads and more …

D3.jsでグラフを描いてみた

ak2ie
February 08, 2022

 D3.jsでグラフを描いてみた

ak2ie

February 08, 2022
Tweet

More Decks by ak2ie

Other Decks in Programming

Transcript

  1. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); 円グラフの描画領域を作り、データを適用
  2. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); ←操作対象を選択  ※この時点では存在しない
  3. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); ←データの個数分の  置き場所を作る const data = [5, 10, 15, 30, 20]; const pie = d3.pie().value((d) => d)(data); ↑円グラフ描画に必要な情報(描画開始/終 了角度、順番など)を生成してくれる
  4. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); ←データと置き場所を紐付ける
  5. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); ←作ったプレースホルダー  について処理する
  6. const node = d3 .select("svg") .selectAll("g") .data(pie) .enter() .append("g") .attr("transform",

    "translate(200,200)"); ↓軸を移動 デフォルトでは 右下しか見えない x軸 y軸
  7. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return

    colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); 円グラフを設定し描画
  8. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return

    colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); const colors = ["カラーコード", ...]; ↓半径100の円
  9. node .append("path") .attr("d", arc) .attr("fill", (_, i) => { return

    colors[i % colors.length]; }); const arc = d3.arc().outerRadius(100).innerRadius(0); const colors = ["カラーコード", ...]; ←円グラフを描画  色を塗る
  10. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br

    />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ツールチップを表示するコード
  11. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br

    />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ↑内容を設定  名前と値を表示 const data = [ { name: "やまだ", value: 5 }, { name: "たなか", value: 10 }, { name: "さとう", value: 15 }, { name: "いけだ", value: 30 }, { name: "こやま", value: 20 }, ]; ←データ
  12. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br

    />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ←マウスカーソルに  追従
  13. node .on("mouseover", (_, d) => { d3.select("#tooltip") .style("visibility", "visible") .html(`${d.data.name}<br

    />${d.data.value}`); }) .on("mousemove", (event, _) => { d3.select("#tooltip") .style("top", event.pageY + 20 + "px") .style("left", event.pageX + 20 + "px"); }) .on("mouseout", () => { d3.select("#tooltip").style("visibility", "hidden"); }); ↓マウスが外れたら消す