d3js绘制多系统柱形图

//创建画布

varseriesNames=getSeriesName(chartData);varmaxData=getMaxChartData(chartData);varminData=getMinChartData(chartData);varsvg=d3.select("#column").append("svg").attr("width",canvasWidth).attr("height",canvasHeight);xScale=d3.scale.ordinal().domain(chartData[0].xMarks).rangeRoundBands([margin.left,canvasWidth-margin.left],.1);xAxis=d3.svg.axis().scale(xScale).orient("bottom");yScale=d3.scale.linear().domain([minData,maxData]).range([canvasHeight-margin.bottom,margin.top]);yAxis=d3.svg.axis().scale(yScale).orient("left");//.ticks(5)控制段数varxBar=svg.append("g").attr("class","xAxis").attr("transform","translate(0,"+(yScale(minData))+")").call(xAxis)varyBar=svg.append("g").attr("class","xAxis").attr("transform","translate("+margin.top+",0)").call(yAxis).append("text").attr("transform","rotate(-90)").attr("y",0-margin.left).attr("x",0-(canvasHeight/2)).attr("dy","1em").text("测试竖标题");svg.append("text").attr("x",canvasWidth-margin.left).attr("y",yScale(minData)+10).attr("text-anchor","middle").text("月份");xColumnWidth=d3.scale.ordinal();xColumnWidth.domain(seriesNames).rangeRoundBands([0,xScale.rangeBand()]);varlen=getDataLength(chartData);varkColumnObject=newkColumnObject();for(vari=0;i<len;i++){kColumnObject.initColumn(i)}addLegend()functionaddLegend(){varlegend=svg.selectAll(".legend").data(seriesNames)//seriesNames.slice().reverse().enter().append("g").attr("class","legend").attr("transform",function(d,i){return"translate(0,"+i*20+")";});legend.append("rect").attr("x",canvasWidth-margin.left).attr("width",18).attr("height",18).style("fill",color);legend.append("text").attr("x",canvasWidth-margin.left-5).attr("y",9).attr("dy",".35em").style("text-anchor","end").text(function(d){returnd;});}/**添加柱形图*/functionkColumnObject(){this.group=null;this.initColumn=function(id){vararr=chartData[0].series[id].data;this.group=svg.append("g").attr("class","column");this.group.selectAll("rect").data(arr).enter().append("rect").attr("width",xColumnWidth.rangeBand()).attr("x",function(d,i){returnxScale(chartData[0].xMarks[i])+xColumnWidth.rangeBand()*id;}).attr("y",function(d){returnyScale(Math.max(0,d));}).attr("height",function(d){returnMath.abs(yScale(d)-yScale(0));}).style("fill",colors[id]).attr("cursor","pointer");this.group.selectAll("text").data(arr).enter().append("text").attr("x",function(d,i){return(xScale(chartData[0].xMarks[i])+xColumnWidth.rangeBand()*id)+1;}).attr("y",function(d){returnyScale(Math.max(0,d)-2);}).attr("fill","red").attr("dy",".35em").text(function(d){returnd;});}}/**返回系列名*@参数data柱图数据*/functiongetSeriesName(data){varlen=data[0].series.length;varseriesName=[];for(vari=0;i<len;i++){seriesName.push(data[0].series[i].name);}returnseriesName;}/**返回长度*@参数data柱图数据*/functiongetDataLength(data){varlen=data[0].series.length;returnlen;}/**返回chartData最大值*@参数data柱图数据*/functiongetMaxChartData(data){varmaxData=0;varlen=data[0].series.length;for(vari=0;i<len;i++){maxData=d3.max([maxData,d3.max(data[0].series[i].data)]);}returnmaxData;}/**返回chartData最小值*@参数data柱图数据*/functiongetMinChartData(data){varminData=0;varlen=data[0].series.length;for(vari=0;i<len;i++){minData=d3.min([minData,d3.min(data[0].series[i].data)]);}returnminData;}