/villagepump/d3-piechart-button

generated at 2/17/2025, 6:52:37 AM
d3-piechart-button
D3.jsで円グラフ（pie chart）の描画テストをするアイコンボタン


↓実行ボタン
ページの一番下に表示されるんですね｡
表示場所どうやって制御するのか、わからんのです
エディタ領域の一番下に表示するように変更
<div>タグのid属性のところへ配置できそうだが、Scrapbox でどうやって<div>タグを作るのかがわからない

円グラフを消すには、再読み込み（リロード）してください
あと、これ以外に消す方法をご存知でしたら、教えて下さい。
見えなくするだけであれば、 style.display='none' で消せます
DOMの削除なら element.parentNode.removeChild(element) です
Page Menuで表示を切り替えるボタンを作るとかどうでしょう？
もう一度押すと消えるようにしました
更にもう一度押すとエラーになってしまいますが……
<script>タグは消せるけど、読み込まれた JavaScript は消えないんですね…
ESModule版でon/offの切り替えができるようにしました
cursorの縦棒( <svg> で作られている)が消えるバグがあったので直しました

↓アイコン用画像

button.js(function () {
  let D3js = document.getElementById('__D3js__')
  if (!D3js) {
    D3js = document.createElement("script");
    D3js.id = '__D3js__'
    D3js.src = '//cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js'
    document.head.appendChild(D3js);
  }
 
  let chart =  document.getElementById('__pie__')
  if (!chart) {
    chart = document.createElement("script");
    chart.id = '__pie__'
    chart.src = '/api/code/villagepump/d3-piechart-button/d3script.js'
    document.head.appendChild(chart);
  }
  // 既にchartがある場合は削除する
  chart.parentNode.removeChild(chart);
  document.getElementById('editor').getElementsByTagName('svg')?.[0]?.remove();
})()

d3script.js// データセット
const dataset = [
  { "name": "A", "value": 5 },
  { "name": "B", "value": 6 },
  { "name": "C", "value": 8 },
  { "name": "D", "value": 1 },
  { "name": "E", "value": 2 },
  { "name": "F", "value": 6 },
  { "name": "G", "value": 8 },
  { "name": "H", "value": 6 },
  { "name": "I", "value": 10 },
  { "name": "J", "value": 9 }
] 
const width = 600 // グラフの幅
const height = 600 // グラフの高さ
const radius = Math.min(width, height) / 2 - 10 
// SVG領域の設定
const svg = d3.select("#editor")
  .append("svg")
  .attr("width", width)
  .attr("height", height)
const g = svg.append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// カラーの設定
const color = d3.scaleOrdinal()
  .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"])

// パイチャートデータセット用関数の設定
const pie = d3.pie()
  .value((d) => d.value)
  .sort(null)
// パイチャートSVG要素の設定
const pieGroup = g.selectAll(".pie")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "pie")

const arc = d3.arc()
  .outerRadius(radius)
  .innerRadius(radius / 2)

pieGroup.append("path")
  .attr("d", arc)
  .attr("fill", (d) => color(d.index) )
  .attr("opacity", 0.75)
  .attr("stroke", "white")
// パイチャートテキストSVG要素の設定
const text = d3.arc()
  .outerRadius(radius - 30)
  .innerRadius(radius - 30)

pieGroup.append("text")
  .attr("fill", "black")
  .attr("transform", (d) => "translate(" + text.centroid(d) + ")" )
  .attr("dy", "5px")
  .attr("font", "10px")
  .attr("text-anchor", "middle")
  .text((d) => d.data.name);

button2.jsimport {installCDN} from '/api/code/villagepump/install-CDN/script.js';

export async function execute() {
	await installCDN({id: '__D3js__', src: '//cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js'});
	const {PieChart} = await import('/api/code/villagepump/d3-piechart-button/pieChart.js');
	const pieChart = new PieChart({id: '__pie__'});
	if (pieChart.hasChart()) {
    	pieChart.remove();
    	return;
    }
	pieChart.draw();
}

pieChart.js// データセット
const dataset = [
  { "name": "A", "value": 5 },
  { "name": "B", "value": 6 },
  { "name": "C", "value": 8 },
  { "name": "D", "value": 1 },
  { "name": "E", "value": 2 },
  { "name": "F", "value": 6 },
  { "name": "G", "value": 8 },
  { "name": "H", "value": 6 },
  { "name": "I", "value": 10 },
  { "name": "J", "value": 9 }
] 
const width = 600 // グラフの幅
const height = 600 // グラフの高さ
const radius = Math.min(width, height) / 2 - 10 

export class PieChart {
  constructor({id}) {
  	this.id = id;
  }
  draw() {
    // SVG領域の設定
    const svg = d3.select("#editor")
      .append("svg")
      .attr("id", this.id)
      .attr("width", width)
      .attr("height", height)
    const g = svg.append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    
    // カラーの設定
    const color = d3.scaleOrdinal()
      .range(["#DC3912", "#3366CC", "#109618", "#FF9900", "#990099"])
    
    // パイチャートデータセット用関数の設定
    const pie = d3.pie()
      .value((d) => d.value)
      .sort(null)
    // パイチャートSVG要素の設定
    const pieGroup = g.selectAll(".pie")
      .data(pie(dataset))
      .enter()
      .append("g")
      .attr("class", "pie")
    
    const arc = d3.arc()
      .outerRadius(radius)
      .innerRadius(radius / 2)
    
    pieGroup.append("path")
      .attr("d", arc)
      .attr("fill", (d) => color(d.index) )
      .attr("opacity", 0.75)
      .attr("stroke", "white")
    // パイチャートテキストSVG要素の設定
    const text = d3.arc()
      .outerRadius(radius - 30)
      .innerRadius(radius - 30)
    
    pieGroup.append("text")
      .attr("fill", "black")
      .attr("transform", (d) => "translate(" + text.centroid(d) + ")" )
      .attr("dy", "5px")
      .attr("font", "10px")
      .attr("text-anchor", "middle")
      .text((d) => d.data.name);
  }
  
  hasChart() { return document.getElementById(this.id) !== null;}
  
  remove() {
    const chart = document.getElementById(this.id);
    if (!chart) return;
    
    // 既にchartがある場合は削除する
    console.log('The chart already exists. Removing it...');
    chart.parentNode.removeChild(chart);
  }
}

 ← 実行ボタン

参考ページ
Mousetrap

#UserScript
#icon-button