d3.js学习笔记（二）：完整的柱状图示例

最新推荐文章于 2024-02-18 09:59:44 发布

蓝天上的一朵云

最新推荐文章于 2024-02-18 09:59:44 发布

阅读量967

点赞数

分类专栏：其它

本文链接：https://blog.csdn.net/u012846041/article/details/82965449

版权

这篇博客介绍了使用d3.js 3.x版本创建柱状图的详细步骤，包括数据绑定、坐标轴绘制和柱状图渲染等关键代码。

摘要由CSDN通过智能技术生成

本示例采用d3的3.x版本库，示例代码如下：

 d3.fullAxisExample = function()
    {
        var width = 240;
        var height = 240;

        //在 body 里添加一个 SVG 画布	
        if (svg == undefined)
        {
            svg = d3.select("body")
                .append("svg")
                .attr("width", width)
                .attr("height", height);
        }
        

        //画布周边的空白
        var padding = { left: 30, right: 30, top: 20, bottom: 20 };

        //定义一个数组
        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];

        //x轴的比例尺(ordinal表示顺序比例尺，按照数量产生比例尺序号)（本例中横坐标采用数组 序号表示）
        var xScale = d3.scale.ordinal()
            .domain(d3.range(dataset.length))
            .rangeRoundBands([0, width - padding.left - padding.right]);

        //y轴的比例尺   domian表示输入数据的范围，range表示输出数据的范围（本例中Y轴输出范围为0-到指定的画板高度并减去边缘值）