zoukankan      html  css  js  c++  java
  • D3_book 7 area

    <!-- area的例子
    csv使用node.js提供的
    --> <!DOCTYPE html> <meta charset="utf-8"> <style> svg { font: 10px sans-serif; } path { fill: steelblue; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .brush .extent { stroke: #fff; fill-opacity: .125; shape-rendering: crispEdges; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var margin = {top: 10, right: 10, bottom: 100, left: 40}, margin2 = {top: 430, right: 10, bottom: 20, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom, height2 = 500 - margin2.top - margin2.bottom; var parseDate = d3.time.format("%b %Y").parse; var x = d3.time.scale().range([0, width]), x2 = d3.time.scale().range([0, width]), y = d3.scale.linear().range([height, 0]), y2 = d3.scale.linear().range([height2, 0]); var xAxis = d3.svg.axis().scale(x).orient("bottom"), xAxis2 = d3.svg.axis().scale(x).orient("bottom"), yAxis = d3.svg.axis().scale(y).orient("left"); var area=d3.svg.area() .interpolate("monotone") //这里教程没有写 .x(function(d){return x(d.date);}) //很容易写成data .y0(height) .y1(function(d){return y(d.price);}) ; var area2=d3.svg.area() .interpolate("monotone") .x(function(d){return x2(d.date);}) .y0(height2) .y1(function(d){return y2(d.price);}) ; var svg=d3.select('body').append('svg') .attr({ 'width':width+margin.left+margin.right, 'height':height+margin.top+margin.bottom }) var focus=svg.append('g') .attr('transform','translate('+margin.left+','+margin.top+')') ; var context=svg.append('g') .attr('transform','translate('+margin2.left+','+margin2.top+')') ; d3.csv('data.csv',function(error,data){ data.forEach(function(d){ d.date = parseDate(d.date); d.price=+d.price; }); x.domain(d3.extent(data.map(function(d){return d.date;}))); y.domain([0,d3.max(data.map(function(d){return d.price;}))]); x2.domain(x.domain()); //这里没有加() y2.domain(y.domain()); focus.append('path') .datum(data) .attr('d',area) ; focus.append('g') .attr('class','x axis') .attr('transform','translate(0,'+height+')') .call(xAxis) ; focus.append('g') .attr('class','y axis') .call(yAxis) ; context.append('path') .datum(data) .attr('d',area2) ; context.append('g') .attr('class','x axis') .attr('transform','translate(0,'+height2+')') .call(xAxis2) ; }); </script>

  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/wang-jing/p/3699036.html
Copyright © 2011-2022 走看看