D3系列第二弹——绘制柱状图

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

lucky_sdy

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

阅读量577

点赞数 1

分类专栏：数据可视化D3学习文章标签： d3 html

本文链接：https://blog.csdn.net/lucky_sdy/article/details/77896087

版权

数据可视化D3学习专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML文件程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3Study</title>
    <script type="text/javascript"src="D3/d3.min.js"></script>
    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }

        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }

        .MyRect {
            fill: steelblue;
        }

        .MyText {
            fill: white;
            text-anchor: middle;
        }

    </style>

</head>
<body>
<div id="rect" style="height: 400px;background-color: darksalmon"></div>
</body>
<script type="text/javascript" src="D3/Rect.js"></script>

</html>

JS文件程序：

/**
 * Created by sdy on 2016/4/10.
 */
//画布大小
var width = 400;
var height = 400;

//在 body 里添加一个 SVG 画布
var svg2 = d3.select("#rect")
    .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轴的比例尺
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width - padding.left - padding.right]);

//y轴的比例尺
var yScale = d3.scale.linear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);

//定义x轴
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

//定义y轴
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

//矩形之间的空白
var rectPadding = 4;

//添加矩形元素
var rects = svg2.selectAll(".MyRect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class","MyRect")
    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function(d,i){
        return xScale(i) + rectPadding/2;
    } )
    .attr("y",function(d){
        return yScale(d);
    })
    .attr("width", xScale.rangeBand() - rectPadding )
    .attr("height", function(d){
        return height - padding.top - padding.bottom - yScale(d);
    });

//添加文字元素
var texts = svg2.selectAll(".MyText")
    .data(dataset)
    .enter()
    .append("text")
    .attr("class","MyText")
    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function(d,i){
        return xScale(i) + rectPadding/2;
    } )
    .attr("y",function(d){
        return yScale(d);
    })
    .attr("dx",function(){
        return (xScale.rangeBand() - rectPadding)/2;
    })
    .attr("dy",function(d){
        return 20;
    })
    .text(function(d){
        return d;
    });

//添加x轴
svg2.append("g")
    .attr("class","axis")
    .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
    .call(xAxis);

//添加y轴
svg2.append("g")
    .attr("class","axis")
    .attr("transform","translate(" + padding.left + "," + padding.top + ")")
    .call(yAxis);

效果图：