话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>BarChart</title>
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<svg width="1600" height="800" id="mainsvg" class="svgs">
</svg>
<script>
const data = [{name: 'a', value: 6}, {name: 'b', value: 7}];
const svg = d3.select('#mainsvg');//主画布
const width = +svg.attr('width');
const height = +svg.attr('height');//主画布的宽和高
const margin = {top: 60, right: 30, bottom: 60, left: 50};//图表部分在主画布周围的留白宽度
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;//图表部分的宽和高
//x和y轴的比例尺,domain是指定响应的取值范围,range是指定实际在屏幕上的显示范围,比例尺是一个函数,可以将domain里特定的某一个值转化为屏幕上实际显示的位置
const XScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([0, innerWidth]);
const YScale = d3.scaleBand()
.domain(data.map(d => d.name))
.range([0, innerHeight])
.padding(0.1);//让每相邻的两个刻度之间有0.1的间距,防止画出来的柱状图连在一起
const g = svg.append('g').attr('id', 'maingroup').attr('transform', `translate(${margin.left},${margin.top})`);
const xAxis = d3.axisBottom(XScale);
g.append('g').call(xAxis).attr('transform', `translate(0, ${innerHeight})`);
const yAxis = d3.axisLeft(YScale);
g.append('g').call(yAxis);
data.forEach(d => {//对数据进行绘制
g.append('rect')
.attr('width', XScale(d.value))
.attr('height', YScale.bandwidth())//比例尺自带的接口,返回每一个刻度的宽度
.attr('fill', 'black')
.attr('y', YScale(d.name));
});
d3.selectAll('.tick text').attr('font-size', '20');//刻度的字体大小调整
g.append('text')//加一个图表的标题
.text('TEST')
.attr('font-size', '50')
.attr('transform', `translate(${innerWidth / 2},0)`)
.attr('text-anchor', 'middle');
</script>
</body>
</html>
效果如下