D3.js 学习（ 一） 

<html>  
<head>  
    <meta charset="utf-8">
    <title>第三课：为柱形图添加坐标轴</title>  

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

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var body = d3.select("body");
var width = 400;
var height = 400;
var svg = body.append("svg")
            .attr("width", 400)
            .attr("height", 400);
// 1. 比例尺   

var xScale = d3.scale.ordinal()
                .domain([0, 1, 2, 3, 4, 5, 6])
                .rangeRoundBands([0,300]);//在300个像素上平均分配
console.info(xScale(1));
// 2. 坐标轴  x
var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom");
var gxAxis = svg.append("g")
                .attr("class","axis")
                .attr("transform","translate(30,300)")
                .call(xAxis);
// 3.  y轴
var yScale = d3.scale.linear()
                .domain([100, 0])
                .range([0, 250]);
var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
var gyAxis = svg.append("g")
                .attr("class","axis")
                .attr("transform","translate(30,50)")
                .call(yAxis);            
//绘制矩形
var dataset = [30, 20 , 10, 60, 50, 40, 33];
yScale.domain([0,100]);
var rects = svg.selectAll(".MyRect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("class","MyRect")
                .attr("transform","translate(30,50)")
                .attr("x", function(d,i){
                    return xScale(i);
                })
                .attr("y", function(d){
                    return width - 150 - yScale(d);
                })
                .attr("width",function(){
                    return xScale.rangeBand() - 4;
                })
                .attr("height",function(d){
                    return yScale(d);
                });
    var texts = svg.selectAll(".MyText")
    .data(dataset)
    .enter()
    .append("text")
    .attr("class","MyText")
    .attr("transform","translate(30,50)")
    .attr("x", function(d,i){
        return xScale(i);
    })
    .attr("y", function(d){
        return width - 150 - yScale(d);
    })
    .attr("dx",function(){
        return xScale.rangeBand()/2;
    })
    .attr("dy",function(d){
        return 15;
    })
    .text(function(d){
        return d;
    });
</script>


</body>  
</html>

 

posted @ 2016-04-07 22:24  小禾点点  阅读(292)  评论(0)  编辑  收藏  举报