d3-script-button

↓実行ボタン

d3-script-button.icon

↓アイコン用画像

https://gyazo.com/043ff19740577c2444280e958eadf210

code:button.js

(() => {

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 d3script = document.getElementById('__D3sc__');

if (d3script){

// リロードしてリセット

location.reload(false);

} else {

d3script = document.createElement("script");

d3script.id = '__D3sc__';

d3script.type = 'module';

document.body.appendChild(d3script);

}

})()

code:button2.js

import {installCDN} from '/api/code/suto3/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 d3Script = new D3Script('__D3sc__');

if(d3Script.hasScript()) {

d3Script.remove();

alert("removed");

location.reload(false);

return;

}

d3Script.draw();

}

class D3Script {

constructor(id) {

this.id = id;

}

draw() {

let d3script = document.createElement("script");

d3script.id = this.id;

d3script.type = 'module';

document.body.appendChild(d3script);

}

hasScript() { return document.getElementById(this.id) !== null;}

remove() {

const d3script = document.getElementById(this.id);

if (!d3script) return;

// 既にscriptがある場合は削除する

d3script.parentNode.removeChild(d3script);

console.log('The script already exists. Removing it...');

}

}

code:icon-button.js

import {installCDN} from '/api/code/suto3/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 d3Script = new D3Script('__D3sc__');

if(d3Script.hasScript()) {

d3Script.remove();

alert("removed");

location.reload(false);

return;

}

d3Script.draw();

}

class D3Script {

constructor(id) {

this.id = id;

}

draw() {

let d3script = document.createElement("script");

d3script.id = this.id;

d3script.type = 'module';

document.body.appendChild(d3script);

}

hasScript() { return document.getElementById(this.id) !== null;}

remove() {

const d3script = document.getElementById(this.id);

if (!d3script) return;

// 既にscriptがある場合は削除する

d3script.parentNode.removeChild(d3script);

console.log('The script already exists. Removing it...');

}

}

code:script.js

// D3.js のスクリプトd3script.jsを実行する UserScript

scrapbox.PageMenu.addItem({

title: "d3-script",

onClick: async () => {

const path = '//cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js';

await import(path).then(() => {

const d3Script = new D3Script('__D3sc__');

if(d3Script.hasScript()) {

d3Script.remove();

alert("removed");

location.reload(false);

return;

}

d3Script.draw();

});

}

});

class D3Script {

constructor(id) {

this.id = id;

}

draw() {

let d3script = document.createElement("script");

d3script.id = this.id;

d3script.type = 'module';

document.body.appendChild(d3script);

}

hasScript() { return document.getElementById(this.id) !== null;}

remove() {

const d3script = document.getElementById(this.id);

if (!d3script) return;

// 既にscriptがある場合は削除する

d3script.parentNode.removeChild(d3script);

console.log('The script already exists. Removing it...');

}

}

サンプルスクリプト

code:d3script.js

// 1. データの準備

const dataset = [

];

const width = 400; // グラフの幅

const height = 300; // グラフの高さ

const margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };

// 2. SVG領域の設定

const svg = d3.select("#editor").append("svg").attr("width", width).attr("height", height);

// 3. 軸スケールの設定

const xScale = d3.scaleLinear()

const yScale = d3.scaleLinear()

// 4. 軸の表示

const axisx = d3.axisBottom(xScale).ticks(5);

const axisy = d3.axisLeft(yScale).ticks(5);

svg.append("g")

.attr("transform", "translate(" + 0 + "," + (height - margin.bottom) + ")")

.call(axisx)

.append("text")

.attr("fill", "black")

.attr("x", (width - margin.left - margin.right) / 2 + margin.left)

.attr("y", 35)

.attr("text-anchor", "middle")

.attr("font-size", "10pt")

.attr("font-weight", "bold")

.text("X 軸");

svg.append("g")

.attr("transform", "translate(" + margin.left + "," + 0 + ")")

.call(axisy)

.append("text")

.attr("fill", "black")

.attr("text-anchor", "middle")

.attr("x", -(height - margin.top - margin.bottom) / 2 - margin.top)

.attr("y", -35)

.attr("transform", "rotate(-90)")

.attr("font-weight", "bold")

.attr("font-size", "10pt")

.text("Y 軸");

// 5. ラインの表示

svg.append("path")

.datum(dataset)

.attr("fill", "none")

.attr("stroke", "steelblue")

.attr("stroke-width", 1.5)

.attr("d", d3.line()

);