效果图：
我的影片.gif
- 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);
