d3.js:linechart
code:d3script.css
div.bar {
display: inline-block;
width: 40px;
height: 75px;
/* background-color: teal; */
background-color: blue;
}
code:d3script.js
// 1. データの準備
const dataset = [
];
code:d3script.js
const width = 400; // グラフの幅
const height = 300; // グラフの高さ
const margin = { "top": 30, "bottom": 60, "right": 30, "left": 60 };
code:d3script.js
// 2. SVG領域の設定
const svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
code:d3script.js
// 3. 軸スケールの設定
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d0)]) const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d1)]) code:d3script.js
// 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 Label");
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 Label");
code:d3script.js
// 5. ラインの表示
svg.append("path")
.datum(dataset)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
d3.js.icon
https://img.shields.io/badge/D3.js-linechart-F9A03C.svg?logo=D3.js&style=for-the-badge