D3.js实现复杂信息图表
1、新建html文档。
2、准备好需要用到的表格。
3、书写hmtl代码。<div class="container"> <header> <h1><strong>Multiple Area Charts</strong> with D3.js</h1> <p>Zoom and pan multiple area charts with D3.js</p> </header> <section class="main"> <div id="chart-container"> <h2>Electricity Consumption per capita</h2> </div> </section> </div>
4、书写css代码。#chart-container { width: 1000px; margin: 0 auto 50px auto; background: rgba(255,255,255,0.5); box-shadow: 1px 1px 4px rgba(0,0,0,0.2); padding: 20px 30px; }#chart-container h2 { color: #444; margin: 0 0 10px; font-weight: 300; padding: 10px; text-shadow: 0 1px 1px rgba(255,255,255,0.8); font-size: 24px; }svg { font-family: 'Lato', Arial, serif; font-size: 10px; font-weight: 700; text-shadow: 0 1px 1px rgba(255,255,255,0.8); }text.country-title { font-size: 20px; }text.instructions { font-size: 16px; }g.context g.brush rect.background { fill: rgba(0,0,0,.1); }g.context g.axis path { stroke-opacity: 0; }g.context g.axis line { stroke-opacity: .1; }g.france path.chart { fill: rgba(127,201,127,0.5); }g.germany path.chart { fill: rgba(127,201,174,0.5); }g.japan path.chart { fill: rgba(127,183,201,0.5); }g.uk path.chart { fill: rgba(127,130,201,0.5); }g.usa path.chart { fill: rgba(171,127,201,0.5); }.axis path, .axis line { fill: none; stroke: #aaa; shape-rendering: crispEdges; }.brush .extent { stroke: #f09f8c; fill-opacity: .125; shape-rendering: crispEdges; }g.context rect.background { fill: rgb(200,200,255); visibility: visible !important; }
5、书写并添加js代码。 <script> var margin = {top: 10, right: 40, bottom: 150, left: 鲂番黟谊60}, width = 940 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, contextHeight = 50; contextWidth = width * .5; var svg = d3.select("#chart-container").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", (height + margin.top + margin.bottom)); d3.csv('data.csv', createChart); function createChart(data){ var countries = []; var charts = []; var maxDataPoint = 0; for (var prop in data[0]) { if (data[0].hasOwnProperty(prop)) { if (prop != 'Year') { countries.push(prop); s',this.name.toLowerCase()) .attr("transform", "translate(" + this.margin.left + "," + (this.margin.top + (this.height * this.id) + (10 * this.id)) + ")"); this.chartContainer.append("path") .data([this.chartData]) .attr("class", "chart") .attr("clip-path", "url(#clip-" + this.id + ")") .attr("d", this.area); this.xAxisTop = d3.svg.axis().scale(this.xScale).orient("bottom"); this.xAxisBottom = d3.svg.axis().scale(this.xScale).orient("top"); if(this.id == 0){ this.chartContainer.append("g") .attr("class", "x axis top") .attr("transform", "translate(0,0)") .call(this.xAxisTop); } if(this.showBottomAxis){ this.chartContainer.append("g") .attr("class", "x axis bottom") .attr("transform", "translate(0," + this.height + ")") .call(this.xAxisBottom); } this.yAxis = d3.svg.axis().scale(this.yScale).orient("left").ticks(5); this.chartContainer.append("g") .attr("class", "y axis") .attr("transform", "translate(-15,0)") .call(this.yAxis); this.chartContainer.append("text") .attr("class","country-title") .attr("transform", "translate(15,40)") .text(this.name); } Chart.prototype.showOnly = function(b){ this.xScale.domain(b); this.chartContainer.select("path").data([this.chartData]).attr("d", this.area); this.chartContainer.select(".x.axis.top").call(this.xAxisTop); this.chartContainer.select(".x.axis.bottom").call(this.xAxisBottom); } </script>
6、代码整体结构。
7、查看效果。
