d3.js:svg

CSS

code:d3script.css

svg{

font: 12px sans-serif;

text-align: right;

padding: 3px;

margin: 1px;

}

text{

font-weight: bolder;

font-size: 20px;

fill:#009900; /* テキストの色 */

stroke-width: 1px; /* 枠線の太さ */

}

共通部分

code:d3script.js

// SVG領域の設定

const width = 600 // グラフの幅

const height = 400 // グラフの高さ

// SVG設定

const svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height)

code:testxx.js

// SVG領域に線を描画

svg.append("line")

.attr("x1",100)

.attr("x2",500)

.attr("y1",100)

.attr("y2",300)

.attr("stroke-width",4)

.attr("stroke","#0e9aa7")

code:testxx.js

// SVG領域に長方形を描画

svg.append("rect")

.attr("x",100) // 開始x座標

.attr("y",100) // 開始y座標

.attr("width",400) // 横幅

.attr("height",200) // 縦幅

.attr("fill","#3da4ab")　// 長方形の中の色

.attr("stroke-width",4)　// 線の太さ

.attr("stroke","#0e9aa7") 　//線の色

code:testxx.js

// SVG領域に円の追加

svg.append("circle") // "circle"要素をsvg領域に追加

.attr("cx",300) // 円の中心のx座標

.attr("cy",200) // 円の中心のy座標

.attr("r",100)　// 円の半径

.attr("fill","#3da4ab")　//円の中の色

.attr("stroke-width",4) // 円の枠の太さ

.attr("stroke","#0e9aa7")　// 円の枠の色

code:testxx.js

// SVG領域に多角形を描画

svg.append("polygon") // 多角形要素追加

.attr("points", "300,50 450,200 400,350 200,350 150,200") // xy座標を複数指定

.attr("fill","#3da4ab")　// 円の中の色

.attr("stroke-width", 4)　// 線の太さ

.attr("stroke","#0e9aa7") 　//線の色

code:testxx.js

// SVG領域にテキスト要素を追加

svg.append("text")

.attr("x", 10) // x座標

.attr("y", 30) // y座標

.attr("dx", "10,10,10,10,10,10,10,10,10,10,10,10,10") // dx座標

.attr("dy", "0,4,8,12,16,20,24,28,32,36,40,44,48,52") // dy座標

.attr("rotate", -30)　// テキストの回転角度

.text("svgにテキストを追加します") // プレーンテキスト

code:d3script.js

// Pathの座標データ

var data = [{x: 0, y: 20},

{x: 150, y: 250},

{x: 300, y: 200},

{x: 450, y: 20},

{x: 600, y: 380}]

// line作成関数

var curveFunc = d3.line()

.curve(d3.curveBasis) // curveメソッドで線の形を変更

.x(function(d) { return d.x })

.y(function(d) { return d.y })

// Path追加

svg.append('path')

.attr('d', curveFunc(data))

.attr('stroke', '#333')

.attr('fill', 'none')

https://img.shields.io/badge/D3.js-svg-F9A03C.svg?logo=D3.js&style=for-the-badge