前端 d3js:整合基础方法

使用：

hd3.init("#graph",{"数据1":"1200","数据2": "100"},{
    mouseover : function () {
        var rect = d3.select(this)
            .transition()
            .duration(200)
            .attr("fill","yellow");
    },
    mouseout: function () {
        var rect = d3.select(this)
            .transition()
            .duration(200)
            .attr("fill","skyblue");
    }
});

效果：

代码：

//"#"元素 ："#graph"
//数据和其字段json ：{"数据1":"1200","数据2": "100"}
//交互 方法：
/*{
    mouseover : function () {
        var rect = d3.select(this)
            .transition()
            .duration(200)
            .attr("fill","yellow");
    },
    mouseout: function () {
        var rect = d3.select(this)
            .transition()
            .duration(200)
            .attr("fill","skyblue");
    }
}*/


var hd3 = ( hd3 || function () {
    var ret = {},
        options = {
            height : 500,
            width: 500,
            rectPadding: 30,
            padding: {
                top: 40,
                left: 40,
                right: 40,
                bottom:40
            }
        };

    function init(element,json,onjson) {

        //处理json值
        var data = [];
        var xlist = [];
        $.each(json, function (i,v) {
            xlist.push(i);
            data.push(v);
        });

        //画布
        let svg  = d3.select(element)
            .append("svg")
            .attr("height", options.height)
            .attr("width", options.width)
            .style("background", "#fff");

        //定义一个装图表的分组并且确定他的位置
        let g = svg.append("g")
            .attr("transform","translate(" + options.padding.top + "," + options.padding.left + ")")
            .attr("background", "skyblue");

        //scaleBand()序数比例尺  scaleLinear()线性比例尺 .domain()输入域 range() 输出域
        let xScale = d3.scaleBand()
            .domain(xlist)
            .rangeRound([0, options.width - options.padding.left - options.padding.right],0,0);

        //y轴输入域 [0,400] 输出域 [500-20-20,0]
        let yScale = d3.scaleLinear()
            .domain([0,d3.max(data)])
            .range([options.height - options.padding.top - options.padding.bottom,0]);

        //坐标轴
        // .axisBottom(canshu) 创建向下的坐标轴 参数是比例尺 axisLeft向左的坐标轴
        let xAxis = d3.axisBottom(xScale);
        let yAxis = d3.axisLeft(yScale);

        //到这一步 柱状图的基本架子已经搭起来了，下面需要做的便是怎么把数据呈现了
        //将坐标轴组件加入当前图表分组
        g.append("g")
            .attr("transform","translate(" + 0 + ","+(options.height - options.padding.top - options.padding.bottom)+")")
            .call(xAxis);
        g.append("g")
            .attr("transform","translate(0,0)")
            .call(yAxis);

        //加载数据
        let g_s = g.selectAll(".rect")
            .data(data)
            .enter()
            .append("g");

        //矩形
        g_s.append("rect")
            .attr("x",function (d,i) {
                return xScale(xlist[i]) + options.rectPadding / 2;
            })
            .attr("y",function (d) {
                var min = yScale.domain()[0];
                return yScale(min);
            })
            .attr("width",function () {
                //科普一下哈 xScale.step() 这个得到的是每一个等差刻度的宽喔 这里是 76
                return xScale.step() - options.rectPadding;
            })
            .attr("height",function (d) {
                console.log(d, yScale(400));
                return 0;//height - padding.top - padding.bottom - yScale(d);
            })
            .attr("fill","skyblue")
            //动态效果
            .transition()//添加过度
            .duration(1000)//持续时间
            // .delay(function (d,i) {//延迟
            //     return i*400;
            // })
            .attr("y",function(d){//回到最终状态
                return yScale(d);
            })
            .attr("height",function(d){//回到最终状态
                return options.height-options.padding.top-options.padding.bottom-yScale(d);
            });

        //交互动作
        $.each(onjson, function (i,v) {
           g_s.selectAll("rect")
               .on(i, v);
        });

        //最后 给每个矩形加上文字
        g_s.append("text")
            .attr("x", function (d, i) {
                return xScale(xlist[i]) + options.rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d)- 20;
            })
            .attr("dx", function () {
                return (xScale.step() - options.rectPadding) / 8;
            })
            .attr("dy", 20)
            .text(function (d) {
                return d;
            });
    }
    ret.init = init;
    return ret;
}());