d3-piechart-button
↓実行ボタン
d3-piechart-button.icon
ページの一番下に表示されるんですね。
表示場所どうやって制御するのか、わからんのですsuto3.icon
エディタ領域の一番下に表示するように変更
<div>タグのid属性のところへ配置できそうだが、Scrapbox でどうやって<div>タグを作るのかがわからない
円グラフを消すには、再読み込み(リロード)してください
あと、これ以外に消す方法をご存知でしたら、教えて下さい。
見えなくするだけであれば、style.display='none'で消せます
DOMの削除ならelement.parentNode.removeChild(element)です
もう一度押すと消えるようにしました
更にもう一度押すとエラーになってしまいますが……
<script>タグは消せるけど、読み込まれた JavaScript は消えないんですね…
ESModule版でon/offの切り替えができるようにしました
cursorの縦棒(<svg>で作られている)が消えるバグがあったので直しました
↓アイコン用画像
https://gyazo.com/58190a627c321348da36503278c6a731
https://gyazo.com/222c66942292c1a2fa6e9c3569cfe4bb
code: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(); })()
code: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()
// パイチャートデータセット用関数の設定
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);
code:button2.js
import {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();
}
code: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()
// パイチャートデータセット用関数の設定
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);
}
}
d3-piechart-button.icon ← 実行ボタン
参考ページ