D3学习记录之画柱状图

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

一只从零开始学习的小蜗牛

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

阅读量581

点赞数

分类专栏： D3 文章标签： d3

本文链接：https://blog.csdn.net/zkyrjsxdm/article/details/50388135

版权

D3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

导师要求学习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

收藏

觉得还不错? 一键收藏
0
评论
D3学习记录之画柱状图

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

扫一扫