D3绘制柱状图

最新推荐文章于 2022-09-08 16:20:00 发布

Cupid510

最新推荐文章于 2022-09-08 16:20:00 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏：可视化图表文章标签： svg css canvas js html

本文链接：https://blog.youkuaiyun.com/weixin_44283432/article/details/116081349

可视化图表专栏收录该内容

2 篇文章

订阅专栏

D3绘制柱状图

本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴

// 在 SVG 中，矩形的元素标签是 rect。例如：
<svg>
<rect></rect>
<rect></rect>
</svg>

上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：

x：矩形左上角的 x 坐标
y：矩形左上角的 y 坐标
width：矩形的宽度
height：矩形的高度
要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

<html>
<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        var dataset = [250, 210, 170, 130, 90]; //数据(表示矩形的宽度)
        var width = 300;  //画布的宽度
        var height = 300;   //画布的高度
        var svg = d3.select("body")     //选择文档中的body元素
            .append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度

        var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
        svg.selectAll("rect")  // 选择svg内所有的矩形
            .data(dataset)  //绑定数组
            .enter()     //指定选择集的enter部分
            .append("rect")  //添加足够数量的矩形元素
            .attr("x", 20)
            .attr("y", function (d, i) {
                return i * rectHeight;
            })
            .attr("width", function (d) {
                return d;
            })
            .attr("height", rectHeight - 2)
            .attr("fill", "steelblue");  //给矩形元素设置颜色
    </script>
</body>
</html>