Sample_Coding_143-D

◀︎ ▶︎

<html lang="ja"><meta charset="utf-8">

<style>
svg{width:300px;
height:200px;
border:1px solid black;}
.bar{fill:steelblue;}
.label{font-size:0.8em;
text-anchor:middle;}
</style>
<button id="表示グラフ">グラフ</button>
<div id="ぐらふ表示えりあ"></div>
<script>
document.getElementById("表示グラフ").addEventListener("click",function()
{const data=[{label:"A",value:50},
{label:"B",value:80},
{label:"C",value:30},
{label:"D",value:120},
{label:"E",value:60}];
const svgWidth=300;
const svgHeight=200;
const margin={top:20,right:20,bottom:30,left:40};
const chartWidth=svgWidth - margin.left - margin.right;
const chartHeight=svgHeight - margin.top - margin.bottom;
const maxValue=Math.max(...data.map(d=>d.value));
const xScale=d3.scaleBand()
.domain(data.map(d=>d.label))
.range([0,chartWidth])
.padding(0.1);
const yScale=d3.scaleLinear()
.domain([0,maxValue])
.range([chartHeight,0]);
const svg=d3.create("svg")
.attr("width",svgWidth)
.attr("height",svgHeight);
const g=svg.append("g")
.attr("transform",`translate(${margin.left},${margin.top})`);
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x",d=>xScale(d.label))
.attr("y",d=>yScale(d.value))
.attr("width",xScale.bandwidth())
.attr("height",d=> chartHeight - yScale(d.value));
const xAxis=d3.axisBottom(xScale);
g.append("g")
.attr("transform",`translate(0,${chartHeight})`)
.call(xAxis)
.selectAll("text")
.attr("class","label");
const yAxis=d3.axisLeft(yScale);
g.append("g")
.call(yAxis);
document.getElementById("ぐらふ表示えりあ").appendChild(svg.node());});
</script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<p style="margin:40px;font-size:1.2em;color:#456789;">----- この記述は「生成」ですか？ -----</p>
<p>答: この記述は JavaScriptによる「動的生成」です.</p>
<p>ボタン・クリックでSVGを動的に生成している.</p>

</html>