利用d3画柱状图

最新推荐文章于 2025-11-10 10:41:36 发布

原创最新推荐文章于 2025-11-10 10:41:36 发布 · 631 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

这篇博客展示了如何利用D3.js库来绘制一个简单的条形图。代码中定义了数据、设置了SVG画布、定义了x和y轴的比例尺，并通过比例尺绘制了x轴和y轴。此外，还为数据中的每个条形添加了填充颜色，并调整了刻度文本的字体大小。最后，博客添加了一个图表标题。

话不多说，直接上代码

<!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>