D3.js实现复杂信息图表

1、新建html文档。

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>

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>

7、查看效果。