d3.js多系列柱状图

bar0();function bar0() {var dataset=[]; var xMarks=[]; var w=800; var h=520; var padding=40; //数据  var lineNames=[]; //保存系列名称  var Color = d3.scale.category20();  <%ls=a[1][0]; for(int ii=2;ii<zhibiao.length+2;ii++){ls=a[1][0];%> var shuju=[]; <%for(int i=1;i<a.length;i++){ if(a[i][0].equals(ls)){%> shuju.push(<%=a[i][ii]%>);<%ls=a[i][0]; }else{ %>dataset.push(shuju);shuju=[<%=a[i][ii]%>];<%ls=a[i][0];}}%> dataset.push(shuju); <%}%>//产生数据 function getData() {  <%for(int i=1;i<a.length;i++){%> xMarks.push("<%=a[i][1]%>"); <%}%> <%for(int i=0;i<tuli.length;i++){ if(tuli[i].length()>19){tuli[i]=tuli[i].substring(0,16)+"...";} String[] barname=new String[tuli.length]; for(int iii=0;iii<tuli.length/gsnum;iii++){ for(int ii=0;ii<gsnum;ii++){ barname[ii+gsnum*iii]=tuli[tuli.length/gsnum*ii+iii]; }} %> lineNames.push("<%=barname[i]%>"); <%}%> //console.log(xMarks); //console.log(lineNames);}  //判断是否多维数组，如果不是，则转为多维数组，这些处理是为了处理外部传递的参数设置的，现在数据标准，没什么用 if(!(dataset[0] instanceof Array)) { var tempArr=[]; tempArr.push(dataset); dataset=tempArr; }//模拟数据 getData(); //定义画布 var svg=d3.select("body") .append("svg") .attr("width",w) .attr("height",h); //x比例尺var xScale = d3.scale.ordinal().domain(d3.range(dataset[0].length)).rangeRoundBands([0,w-padding],0.2);max=getMaxdata(dataset);//纵坐标轴比例尺 var yScale = d3.scale.linear() .domain([0,max]) .range([0,280]); //定义横轴 var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(dataset[0].length); //添加横坐标轴并通过编号获取对应的横轴标签 var xBar=svg.append("g") .attr("class","axis") .attr("transform", "translate(40," + (h - 240) + ")") .call(xAxis) .selectAll("text") .attr("transform", "rotate(90)").style("text-anchor", "start").text(function(d){return xMarks[d];}); xColumnWidth= d3.scale.ordinal();xColumnWidth.domain(lineNames).rangeRoundBands([0, xScale.rangeBand()]);//console.log(dataset[0].length);for(var xid=0;xid<dataset.length;xid++){ var svg1=svg.append("g"); addbar(xid,svg1);}//绘制柱状图function addbar(xid,svg1) {var text = svg1.selectAll("text").data(dataset[xid])//绑定数据.enter()//获取enter部分.append("text")//添加text元素，使其与绑定数组的长度一致.attr("x", function (d, i) { return 40+xScale(xMarks[i]) + xColumnWidth.rangeBand() * xid; }).attr("y", function (d) {return h - yScale(d)-260;                }).attr("dy","1em").text(function(d){return d;})   .attr("dx",xColumnWidth.rangeBand()/2).attr("fill","black").attr("font-size","10px").attr("text-anchor","middle");svg1.selectAll("rect").data(dataset[xid]).enter().append("rect").attr("width", xColumnWidth.rangeBand()).attr("x", function (d, i) { return 40+xScale(xMarks[i]) + xColumnWidth.rangeBand() * xid; }).attr("y", function (d) {return h - yScale(d)-240;                })//按比例尺绘制高度.attr("height", function (d) { return Math.abs(yScale(d) - yScale(0)); }).attr("fill",Color(xid)).on("mouseover",function(d,i){d3.select(this)  .attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this)  .transition()  .duration(500)  .attr("fill",Color(xid));});}yScale.range([280,0]);//定义纵轴 var yAxis = d3.svg.axis() .scale(yScale) .orient("left").ticks(10); //添加纵轴 var yBar=svg.append("g") .attr("class", "axis") .attr("transform", "translate("+padding+",0)") .call(yAxis); //添加图例 var legend=svg.append("g"); var legend1=svg.append("g"); var legend2=svg.append("g"); var legend3=svg.append("g"); var legend4=svg.append("g"); var legend5=svg.append("g"); var legend6=svg.append("g");  addLegend();addLegend2();addLegend3();addLegend4();addLegend5();addLegend6();addLegend7();//添加图例 function addLegend() { var lineNames1=[];for(var ii=0;ii<Math.min(2,lineNames.length);ii++){lineNames1.push(lineNames[ii]);}   legend.selectAll("text") .data(lineNames1) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i);});      legend.selectAll("rect") .data(lineNames1) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i);});  legend.attr("transform","translate(40,"+(h-150)+")"); }function addLegend2() {var lineNames2=[];for(var ii=2;ii<Math.min(4,lineNames.length);ii++){lineNames2.push(lineNames[ii]);}legend1.selectAll("text") .data(lineNames2) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+2);});   legend1.selectAll("rect") .data(lineNames2) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+2);}); legend1.attr("transform","translate(40,"+(h-130)+")");}function addLegend3() { var lineNames3=[];for(var ii=4;ii<Math.min(6,lineNames.length);ii++){lineNames3.push(lineNames[ii]);}  legend2.selectAll("text") .data(lineNames3) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+4);});   legend2.selectAll("rect") .data(lineNames3) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+4);}); legend2.attr("transform","translate(40,"+(h-110)+")"); }function addLegend4() {var lineNames4=[];for(var ii=6;ii<Math.min(8,lineNames.length);ii++){lineNames4.push(lineNames[ii]);}legend3.selectAll("text") .data(lineNames4) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+6);});  legend3.selectAll("rect") .data(lineNames4) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+6);}); legend3.attr("transform","translate(40,"+(h-90)+")");}function addLegend5() { var lineNames5=[];for(var ii=8;ii<Math.min(10,lineNames.length);ii++){lineNames5.push(lineNames[ii]);}  legend4.selectAll("text") .data(lineNames5) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+8);});   legend4.selectAll("rect") .data(lineNames5) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+8);}); legend4.attr("transform","translate(40,"+(h-70)+")"); }function addLegend6() {var lineNames6=[];for(var ii=10;ii<Math.min(12,lineNames.length);ii++){lineNames6.push(lineNames[ii]);}legend5.selectAll("text") .data(lineNames6) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+10);});  legend5.selectAll("rect") .data(lineNames6) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+10);}); legend5.attr("transform","translate(40,"+(h-50)+")");}function addLegend7() { var lineNames7=[];for(var ii=12;ii<Math.min(14,lineNames.length);ii++){lineNames7.push(lineNames[ii]);}  legend6.selectAll("text") .data(lineNames7) .enter() .append("text") .text(function(d){return d;}) .attr("class","legend") .attr("x", function(d,i) {return i*400+30;}) .attr("y",0) .style("font-size", "15px").attr("fill",function(d,i){ return Color(i+12);});   legend6.selectAll("rect") .data(lineNames7) .enter() .append("rect") .attr("x", function(d,i) {return i*400+10;}) .attr("y",-10) .attr("width",8) .attr("height",8) .attr("fill",function(d,i){ return Color(i+12);}); legend6.attr("transform","translate(40,"+(h-30)+")"); } //取得多维数组最值 function getMaxdata(arr) { var maxdata=0; for(i=0;i<arr.length;i++) { maxdata=d3.max([maxdata,d3.max(arr[i])]); } return maxdata*1.2; }   }

图例用了些笨办法，不过样子还不错