d3之散点图封装(动画呈现)

效果图：

我的影片.gif

1. html：

<div style="position:absolute;width:100%;height: 100%;">
  <div id="mychart" style="float:left;width:100%;height: 100%;"></div>
</div>

2.数据准备：

var dataset = [
                ['白酒',175,1477],['饼干',249,2258],['炒货',261,2329],
                ['除污类',230,2775],['果酒',5,2523],['护理用品',204,1886],
                ['家用杂品',255,2333],['洁面护肤',267,1392],['进口食品',164,1551],
                ['毛巾',68,1655],['面点类',35,2310],['面类',11,1903],
                ['沐浴',170,1893],['啤酒',190,1898],['其他',212,1248],
                ['肉及水产',179,1166],['食材',213,1497],['食品杂货',180,2439],
                ['蔬菜类',10,2389],['糖果',28,1417],['调料类',299,2179],
                ['文具期刊',203,1785],['洗发',132,1545],['洗衣类',187,1850],
                ['香烟',234,1968],['小五金',208,1320],['休闲小食',188,1465],
                ['牙膏牙刷',93,1492],['饮料',85,1943],['纸质品',127,2336]
            ];
            //[ ['白酒','饼干','炒货'...],[175,249,261..],[1477,2258,2329...] ]
var dataset_new = d3.transpose(dataset);            
var dlabel = dataset_new[0];
var xdata = dataset_new[1];
var ydata = dataset_new[2];
            
var _colorscale = d3.scaleQuantize()
                   .domain([1000,3000])
                   .range(['red','yellow','orange','green']);

3.散点图方法封装

function drawscatter(divname,ydata,xdata,dlabel){
                
                var _swidth = $("#"+divname).width();
                var _sheight = $("#"+divname).height();
                var _margin = {top:10,left:30,right:10,bottom:30};
                var _titleHeight = 50;
                //得到绘图区的高度和宽度
                var _chartHeight = _sheight - _margin.top - _margin.bottom - _titleHeight;
                var _chartWidth = _swidth - _margin.left - _margin.right;
                
                //核心绘图区的边距
                var _chartmargin  =  {top:20,left:20,right:20,bottom:20};
                
                //核心绘图区的高度和宽度
                var _yaxisHeight = _chartHeight - _chartmargin.top - _chartmargin.bottom;
                var _xaxisWidth = _chartWidth - _chartmargin.left - _chartmargin.right;
                
                var _padding = 0.5;
                
                var _svg = d3.select("#"+divname)
                        .append("svg")
                        .attr("width",_swidth)
                        .attr("height",_sheight);
                        
                        
                var _glevel1 = _svg.append("g")
                                    .attr("transform","translate("+_margin.left +","+_margin.top+")");
                
                var _glevel2_title = _glevel1.append("g");
                
                var _glevel2_chart = _glevel1.append("g")
                                        .attr("transform","translate(0,"+_titleHeight+")");
                
                var _gleve3_yaxis = _glevel2_chart.append("g")
                                .attr("id","gyaxis")
                                .attr("transform","translate("+_chartmargin.left+","+_chartmargin.top+")");
                
                
                var _gleve3_xaxis = _glevel2_chart.append("g")
                                .attr("id","gxaxis")
                                .attr("transform","translate("+_chartmargin.left+","+(_chartHeight - _chartmargin.bottom)+")");
            
                var _gleve3_content = _glevel2_chart.append("g")
                                .attr("id","chartcontent")
                                .attr("transform","translate("+_chartmargin.left+","+_chartmargin.top+")");
                
                
                //定义Y轴比例尺
                var _yscale = d3.scaleLinear()
                                   .domain( [0 , d3.max(ydata) ] ).nice()
                                   .range([_yaxisHeight,0])
                                   .clamp(true) ;
                //定义Y轴坐标轴，使用前面定义的比例尺
                var _yaxis = d3.axisLeft()
                                .scale(_yscale)
                                .ticks(5);
                
                _yaxis(_gleve3_yaxis);          
                
                //定义X轴比例尺
                var _xscale = d3.scaleLinear()
                               .domain([0,d3.max(xdata)])
                               .range([0,_xaxisWidth]);
                //定义X轴坐标轴
                var _xaxis = d3.axisBottom()
                                .scale(_xscale);
                
                _xaxis(_gleve3_xaxis);
                
                _gleve3_content.append("g")
                        .selectAll("circle")
                        .data(dlabel)
                        .enter()
                        .append("circle")
                        .attr("cx",0)
                        .attr("cy",_yaxisHeight)
                        .attr("r","0")
                        .style("fill",function(d,i){
                            return _colorscale(ydata[i]);
                        })
                        .transition()
                        .duration(5000)
                        .ease(d3.easeBounce)
                        .attr("cx",function(d,i){
                            return   _xscale(xdata[i]);
                        })
                        .attr("cy",function(d,i){
                            return _yscale(ydata[i]) ;
                        })
                        .attr("r","10");
//              
                _gleve3_content.append("g")
                        .selectAll("text")
                        .data(dlabel)
                        .enter()
                        .append("text")
                        .attr("x",0)
                        .attr("y",_yaxisHeight)
                        .attr("dx",'10')
                        .attr("dy","0.5em")
                        .style("fill",function(d,i){
                            return _colorscale(ydata[i]);
                        })
                        .transition()
                        .duration(5000)
                        .ease(d3.easeBounce)
                        .attr("x",function(d,i){
                            return _xscale(xdata[i]);
                        })
                        .attr("y",function(d,i){
                            return _yscale(ydata[i]);
                        })
                        .filter(function(d,i){
                            return ydata[i]>2500;
                        })
                        .text(function(d,i){
                            return d;
                        });
                        
                        
                drawYaxisGrid("gyaxis",_xaxisWidth,"#ff1");
                drawXaxisGrid("gxaxis",_yaxisHeight,"#ff1");
            }
//给Y轴添加分割线
function drawYaxisGrid(divname,xwidth,color){
                d3.select("#"+divname)
                    .selectAll("g")
                    .append("line")
                    .attr("x1",0)
                    .attr("y1",0)
                    .attr("x2",xwidth)
                    .attr("y2",0)
                    .attr("stroke",color)
                    .attr("stroke-width","0.5");
            }
            
//给X轴添加分割线
function drawXaxisGrid(divname,yheight,color){
                d3.select("#"+divname)
                    .selectAll("g")
                    .append("line")
                    .attr("x1",0)
                    .attr("y1",0)
                    .attr("x2",0)
                    .attr("y2",-1*yheight)
                    .attr("stroke",color)
                    .attr("stroke-width","0.5");
            }

4.调用方法：

drawscatter("mychart",ydata,xdata,dlabel);