d3-piechart-button

D3.jsで円グラフ（pie chart）の描画テストをするアイコンボタン

↓実行ボタン

d3-piechart-button.icon

ページの一番下に表示されるんですね｡

表示場所どうやって制御するのか、わからんのですsuto3.icon

エディタ領域の一番下に表示するように変更

<div>タグのid属性のところへ配置できそうだが、Scrapbox でどうやって<div>タグを作るのかがわからない

円グラフを消すには、再読み込み（リロード）してください

あと、これ以外に消す方法をご存知でしたら、教えて下さい。

見えなくするだけであれば、style.display='none'で消せます

DOMの削除ならelement.parentNode.removeChild(element)です

Page Menuで表示を切り替えるボタンを作るとかどうでしょう？

もう一度押すと消えるようにしました

更にもう一度押すとエラーになってしまいますが……

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()

.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);

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