测试题目：使用 D3 绘制一个折柱混合图，示例数据如下：
data = [
["时间", "销售额", "增长率(%)"],
["一月", 27506, 20.8],
["二月", 24399, 5.4],
["三月", 23120, 22],
["四月", 22053, 0.4],
["五月", 21221, 3.1],
["六月", 22848, 8.6],
["七月", 20178, 28.7],
["八月", 16927, 5.5],
["九月", 19808, 13.5],
["十月", 22450, 3.7]
];
绘制要求：
（1） 需要建立完整的坐标系及网格线；
（2） 第二列为柱图数据，第三列为折线图数据；
（3） 将柱图数值文本标识在柱形上方。
HTML代码：
1 <html> 2 <head> 3 4 <title> 柱形折线图</title> 5 <style> 6 7 8 .axis path, 9 .axis line{10 fill:none;11 stroke:black;12 shape-rendering:crispEdges;13 }14 .axis text {15 font-family:sans-serif;16 font-size :11px;17 }18 .MyRect{19 fill : steelblue;20 }21 .MyText{22 fill :black;23 text-anchor:middle;24 }25 .MyPath{26 fill:none;27 stroke:red;28 stroke-width:1px;29 }30 </style>31 32 </head>33 <body>34 35 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>36 <script src="index.js"></script>37 </body>38 </html>
JavaScript代码：
1 //定义画布 2 3 var width = 500; 4 var height= 500; 5 6 7 var svg=d3.select("body") 8 .append("svg") 9 .attr("width",500) 10 .attr("height",500); 11 12 var padding={top:20,bottom :20,right:20,left:25}; 13 var rectStep=40; 14 var rectWidth=35; 15 16 17 //比例尺 18 //数据 19 //定义比例尺 20 var xScale =d3.scale.ordinal() 21 .domain(["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月"]) 22 .rangeRoundBands([0,400]); 23 24 var y1Scale =d3.scale.linear() 25 .domain([28000,16000]) 26 .range([0,300]); 27 28 var y2Scale =d3.scale.linear() 29 .domain([35,0]) 30 .range([0,300]); 31 32 33 //坐标轴 34 35 //定义坐标轴，其中使用了线性比例尺linear 36 37 var xAxis=d3.svg.axis() 38 .scale(xScale) 39 .orient("bottom"); 40 //追加到画布上 41 var gxAxis=svg.append("g") 42 .attr ("class","axis") 43 .attr("transform","translate(50,400)") 44 .call(xAxis); 45 46 var y1Axis=d3.svg.axis() 47 .scale(y1Scale) 48 .orient("left"); 49 50 51 var y2Axis=d3.svg.axis() 52 .scale(y2Scale) 53 .orient("right"); 54 55 var gy1Axis=svg.append("g") 56 .attr ("class","axis") 57 .attr("transform","translate(50,100)") 58 .call(y1Axis); 59 60 var gy2Axis=svg.append("g") 61 .attr ("class","axis") 62 .attr("transform","translate(450,100)") 63 .call(y2Axis); 64 65 //柱形图 66 67 var dataset=[27506,24399,23120,22053,21221,22848,20178,16927,19808,22450]; 68 69 y1Scale.domain([16000,28000]); 70 71 var rects=svg.selectAll("rect") 72 .data(dataset) 73 .enter() 74 .append("rect") 75 .attr("fill","steelblue") 76 .attr("transform","translate(30,50)") 77 .attr("x",function(d,i){ 78 return padding.left+i*rectStep; 79 }) 80 .attr("y",function(d){ 81 return height- 150-y1Scale(d); 82 //return padding.left+rectStep 83 }) 84 .attr("width",rectWidth) 85 .attr("height",function(d){ 86 return y1Scale(d); 87 }); 88 89 svg.append("g") 90 .call(y1Axis) 91 .append("text") 92 .text("销售额") 93 .attr("transform","translate(60,50)")//text放置的位置 94 .attr("text-anchor","end")//字体尾部对齐 95 .attr("dy",40);//沿y轴平移一个字体的大小 96 97 98 svg.append("g") 99 .call(y1Axis)100 .append("text")101 .text("增长率(%)")102 .attr("transform","translate(500,50)")//text放置的位置103 .attr("text-anchor","end")//字体尾部对齐104 .attr("dy",40);//沿y轴平移一个字体的大小105 106 svg.append("g")107 .call(y1Axis)108 .append("text")109 .text("时间")110 .attr("transform","translate(480,380)")//text放置的位置111 .attr("text-anchor","end")//字体尾部对齐112 .attr("dy",40);//沿y轴平移一个字体的大小113 114 // 线段生成器115 var lines=[{x:20,y:20.8},{x:60,y:5.4},{x:100,y:22},116 {x:140,y:0.4},{x:180,y:3.1},{x:220,y:8.6},117 {x:260,y:28.7},{x:300,y:5.5},{x:340,y:13.5},118 {x:380,y:3.7}];119 120 121 var line = d3.svg.line()122 .x(function(d){return d.x;})123 .y(function(d){return y2Scale(d.y)-200;});124 var d = line(lines);125 svg.append("path")126 .attr("d",line(lines))127 .attr ("class","MyPath") 128 .attr("stroke","black")129 .attr("stroke-width","2px")130 .attr("fill","none")131 .attr("transform","translate(50,300)");132 133 var texts =svg.selectAll(".MyText")134 .data(dataset)135 .enter()136 .append("text") 137 .attr("class","MyText")138 .attr("font-size","10")139 .attr("transform","translate(30,50)")140 .attr("x",function(d,i){141 return padding.left+i*rectStep;142 })143 .attr("y",function(d){144 return height-150-y1Scale(d);145 })146 .attr("dx",rectWidth/2)147 .attr("dy",20+function(d){148 return 15;149 })150 .text(function(d){151 return d;152 });
结果见下图：
