D3学习记录之画柱状图

来源：互联网发布：中国域名价格排行编辑：程序博客网时间：2024/05/20 03:45

导师要求学习D3，so，开始学习
参考网站：http://www.ourd3js.com/wordpress/?p=121
（说明：作者初学，代码是按照网站上面已有的代码敲的，只是里面添加了一些自己在敲的过程中的一些感悟，代码版权归参考网站所有。代码贴在这里主要是为了记录自己的学习过程，也方便以后查看）

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <title>D3: histogram</title>        <style type="text/css">        .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>        <script type="text/javascript" src="../d3/d3.min.js"></script>    </head>    <body>        <script type="text/javascript">        var height = 400,            width = 400;        //在body里面添加一个svg画布        var 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轴比例尺        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 = svg.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);});        //note：        //1，设置比例尺只是将原来数据进行了数据范围的改变，坐标轴的原点仍然还是在左上角，比例尺变换之后的坐标还是以原点为标准来画的，并不是将y轴的输出变成[ymax,ymin]之后坐标轴就真的转换成平时的方向了        //2,transform是平移，将坐标轴和柱形图一起移动才能使两者位置吻合        //3，添加类用的是attr，不是append        //添加文字标签元素        var texts = svg.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 () {return 20;})                       .text(function (d) {return d;});        //note:        //这个是我根据代码想出来的，不知道对不对        //1，dx：相对于当前位置向右移动的距离        //2,dy:相对于当前位置向下移动的距离        //添加x轴        svg.append("g")           .attr("class","axis")           .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")           .call(xAxis);        //添加y轴        svg.append("g")           .attr("class", "axis")           .attr("transform", "translate(" + padding.left + "," + padding.top +")")           .call(yAxis);        //note：        //1，g表示分组元素，坐标轴是由path,line,text三种元素在一起组合成的，所以要将它们放到一个group里面。        </script>    </body></html>

0 0