/villagepump/d3-script-button

generated at 2/20/2025, 7:04:34 PM
d3-script-button
D3.jsのスクリプトを動かすアイコンボタン

↓実行ボタン

↓アイコン用画像


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';
    d3script.src = `/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/d3script.js`
    document.body.appendChild(d3script);
  }
 })()

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 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';
    d3script.src = `/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/d3script.js` ;
    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...');
  }
}

script.js // D3.js のスクリプトd3script.jsを実行する UserScript
scrapbox.PageMenu.addItem({
  title: "d3-script",
  image: "https://gyazo.com/043ff19740577c2444280e958eadf210/raw",
  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';
    d3script.src = `/api/code/${scrapbox.Project.name}/${encodeURIComponent(scrapbox.Page.title)}/d3script.js` ;
    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...');
  }
}

D3.js v4/v5 折れ線グラフ(line chart)の作り方 – データビジュアライゼーション・ラボ
d3script.js// https://wizardace.com/d3-linechart-base/ より
// 1. データの準備
const dataset = [
  [5, 20],
  [25, 67],
  [85, 21],
  [100, 33],
  [220, 88],
  [250, 50],
  [330, 95],
  [410, 12],
  [475, 44],
  [480, 90]
];  
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()
  .domain([0, d3.max(dataset, (d) => { return d[0]; })])
  .range([margin.left, width - margin.right]);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(dataset, (d) => { return d[1]; })])
  .range([height - margin.bottom, margin.top]);

// 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()
    .x((d) => { return xScale(d[0]); })
    .y((d) => { return yScale(d[1]); })
  );


d3-script-button.icon ←実行ボタン

#UserScript
#icon-button