APICloud d3.js使用Rect实现一个类似的柱状图

我就不多说废话了,我先展示下我的效果图。


rect.gif

要实现上面的思路也很简单。
创建SVG--->创建g元素--->添加rect--->再添加rect,并添加动画效果--->添加文字,还是跟上次一样,我不会多次重复的说明之前讲过的。

创建SVG
  var totalPush = [];
        totalPush.push(total);
        //设置定义域和值域
        var liner = d3.scale.linear()
                .domain([0, total])//定义域
                .range([0, width])//值域
                .clamp(true);
        var svg = d3.select(svgId)
                .append("svg")
                .attr("width", width)
                .attr("height", height);

我来举个例子说明设置定义域和值域的意思,好比[0,300]是我们的期望值---定义域,然后[0,1]是我们的输入值--值域,如果要用数学函数这样表达我们可以这样liner(0)=0,liner(1) = 300,所以我们选择[0,1]的范围可以对应到[0,300]的范围,clamp设置为true的意思,当我值域超过了1,我就可以直接去取最大值。

创建g
   var arcs = svg.selectAll("g")
                .data(totalPush)
                .enter()
                .append("g")
添加rect
  arcs.append("rect")
                .style("fill", "#152F72")
                .attr("width",total == 0 ? width : liner(total))
                .attr("height", "20")
                .attr("rx", "6")
                .attr("ry", "6")

.style("fill", "#152F72")为设置颜色,rx,ry为长方形边缘弧度

添加rect,并写动画
//绘画矩形的宽度
        arcs.append("rect")
                .data(dataset)//数据源
                .attr("fill", status == "10" ? "#3D5CDE":"#E66D47")
                .attr("height", "20")
                .attr("rx", "6")
                .attr("ry", "6")
                .attr("width",function(d){
                    return NumberFormat(liner(0),"1");
                })
                .transition()
                .duration(2000)
                .ease("linear")
                .attr("width", function (d) {
                    return NumberFormat(liner(d), "1");
                });

我这里把数据源dataset设置进去,宽度是从0开始,然后transition()开启动画,定义执行时间,和动画效果样式,.attr("width", function (d) {return NumberFormat(liner(d), "1");}); 这里和我之前attrTween不同,如果你使用了这个函数会报如下错误

d3.js:5 Uncaught TypeError: r is not a function
    at SVGRectElement.<anonymous> (d3.js:5)
    at a (d3.js:3)
    at Object.c (d3.js:3)
    at Rn (d3.js:1)
    at Tn (d3.js:1)

为啥会这样,那可以转换吗?我的答案是我不知道,我尝试了自己能力的办法,未解决问题。
attr(name, value):通过指定的name和value过渡属性的值。过渡的初始值是当前属性值(一定要事先设定一个初始值,如果你不想坏的意外),结束值是指定的值。
attrTween(name, tween):根据指定的补间(tween)函数,通过指定的名称(name)过渡属性值。过渡的开始和结束值由补间函数决定。

添加文字
arcs.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) {
                    return NumberFormat(d,"2");
                })
                .attr("fill", "white")
                .attr("x", function(d, i) {//定义位置
                    if(liner(d)==0){
                        return liner(d)+5;
                    }else{
                        return liner(d)-32;
                    }
                })
                .attr("y", 16);

添加文字这里,有个x,表示X轴,Y表示Y轴

全部代码

JS

<script type="text/javascript">
    $(function () {
        var width = 180;//绘图横向的宽度
        var dataset = [];
        var total = 7705;//总量
        dataset.push(3705.47);
        monInBalanceD3Hormal(width, 20, "#monInBalance_pt_gkxxl", total, dataset,10);
    });

    /**
     * @date:2018/4/18 16:13
     * 功能: 资金出入和结算情况绘图
     * @width 长度
     * @height 高度
     * @svgId 绘画SVG的ID
     * @total 总量
     * @dataset 数据集
     * @status 状态码 10  收款金额,20付出金额,收负差额
     */
    function monInBalanceD3Hormal(width, height, svgId, total, dataset,status) {
        var totalPush = [];
        totalPush.push(total);
        //设置定义域和值域
        var liner = d3.scale.linear()
                .domain([0, total])//定义域
                .range([0, width])//值域
                .clamp(true);


        var svg = d3.select(svgId)
                .append("svg")
                .attr("width", width)
                .attr("height", height);

        var arcs = svg.selectAll("g")
                .data(totalPush)
                .enter()
                .append("g")

        arcs.append("rect")
                .style("fill", "#152F72")
                .attr("width",total == 0 ? width : liner(total))
                .attr("height", "20")
                .attr("rx", "6")
                .attr("ry", "6")



        //绘画矩形的宽度
        arcs.append("rect")
                .data(dataset)//数据源
                .attr("fill", status == "10" ? "#3D5CDE":"#E66D47")
                .attr("height", "20")
                .attr("rx", "6")
                .attr("ry", "6")
                .attr("width",function(d){
                    return NumberFormat(liner(0),"1");
                })
                .transition()
                .duration(2000)
                .ease("linear")
                .attr("width", function (d) {
                    return NumberFormat(liner(d), "1");
                });

        //添加文字
        arcs.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) {
                    return NumberFormat(d,"2");
                })
                .attr("fill", "white")
                .attr("x", function(d, i) {//定义位置
                    if(liner(d)==0){
                        return liner(d)+5;
                    }else{
                        return liner(d)-32;
                    }
                })
                .attr("y", 16);

    }

    function NumberFormat(num,digit){
        digit = digit || 3;
        var di=1;
        for(var i=0;i<digit;i++){
            di = di * 10;
        }
        return (Math.floor(num * di) / di);
    }
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/d3.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript" src="../script/jquery-3.0.0.min.js"></script>

html

<div id="container">
    <div class="monInBalance_pt_div" id="monInBalance_pt_gkxxl">
    </div>
</div>

css

    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
 <style type="text/css">
        #container {
            width: 100%;
            height: 100%;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
        }
    </style>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容