Test Title: FIG using a mixed D3 draw off the column, the sample data as follows:
data = [
[ "Time", "sales", "growth rate (%)"],
[ "Jan", 27506, 20.8],
[ "February", 24399, 5.4],
[ "March", 23120, 22],
[ "April", 22053, 0.4],
[ "May", 21221, 3.1],
[ "June", 22848, 8.6],
[ "July", 20178, 28.7],
[ "August", 16927, 5.5],
[ "September", 19808, 13.5],
[ "October", 22450, 3.7]
];
Drawing requirements:
(1) the need to establish a complete coordinate system and grid lines;
(2) The second data column as the FIG., As the third data line chart;
(3) identifying the text column at the top of FIG values cylindrical.
HTML code:
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 code:
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 // scale 18 // data 19 // define the scale 20 var xScale = d3.scale.ordinal () 21 .domain ([ "January", "February", "March", "April", "five Moon "," June "," July "," August "," September "," October " ]) 22 .rangeRoundBands ([0,400 ]); 23 24- var y1Scale = d3.scale.linear () 25 .domain ([28000,16000 ]) 26 is .Range ([0,300 ]); 27 28 var y2Scale = d3.scale. linear() 29 .domain([35,0]) 30 .Range ([0,300 ]); 31 is 32 33 is // axis 34 is 35 // definition of coordinate axes, wherein the linear dimensions Linear 36 37 [ var XAXIS = d3.svg.axis () 38 is .scale (xScale) 39 . Orient ( "bottom" ); 40 // appended to the canvas 41 is var gxAxis svg.append = ( "G" ) 42 is .attr ( "class", "Axis" ) 43 is .attr ( "Transform", "Translate (50,400 ) " ) 44 is .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 is .append ( "text" ) 92 .text ( "sales" ) 93 .attr ( "Transform", "Translate (60,50)") // text placement position 94 .attr ( "Anchor-text", "End") // font alignment tail 95 . attr ( "Dy", 40); // y-axis translating a font size of 96 97 98 svg.append ( "G") 99 .call (y1Axis) 100 .append ( "text" ) 101 .text ( "rate (%)" ) 102 .attr ( "Transform", "Translate (500, 50)") // text placement position 103 . attr ( "Anchor-text", "End") // font alignment tail 104 .attr ( "Dy", 40); // y-axis translation of a font size 105 106 svg.append ( "G" ) 107 . Call (y1Axis) 108 .append ( "text" ) 109 .text ( "time" ) 110 .attr ( "Transform", "Translate (480,380)") // text placement position 111 .attr ( "Anchor-text", "End") // font alignment tail 112 .attr ( "Dy", 40); // y-axis translation of a font size 113 114 // line segment generator 115 var Lines = [{X: 20 is, Y: 20.8}, {X: 60, Y: 5.4}, {X: 100, Y: 22 is }, 1 16 {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 }, 1 18 {X: 380, Y : 3.7 }]; 119 120 121 var Line = d3.svg.line () 122 .x ( function (D) { return DX;}) 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 });
The results shown below:
