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. (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轴

全部代码

html

css