d3系列2--api攻坚战05
今天的内容相比之前的就有点儿难了?怂了没?
别问我为什么不讲详细内容,你写十遍自己就清楚究竟是怎么回事了,画画的事儿还是得动笔动键盘。
先看看效果图
事实上假设用笨办法一条一条画的话。也不难。
可是设想一下假设是非常多非常多条线呢?必需要用科学的数据组织方式才干够实现自己主动xxx。
以下的我最快弄到了13分钟。不能再快了
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <!--以下的标签是用来记录时间的,没用,只是也能够用来记录你自己的练习时间-->
- <meta name="timeRecord" content="27.43,27.42,20.53,17.48,13.27" />
- </head>
- <body>
- <script src="js/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- var margin = {top:20,right:30,bottom:20,left:20};
- var width =960-margin.left-margin.right;
- var height = 500-margin.top-margin.bottom;
- var svg = d3.select("body")
- .append("svg")
- .attr("width",width+margin.left+margin.right)
- .attr("height",height+margin.top+margin.bottom)
- .append("g")
- .attr("transform","translate("+margin.left+","+margin.top+")");
- var x = d3.time.scale()
- .range([0,width]);
- var y = d3.scale.linear()
- .range([height,0]);
- var xAxis = d3.svg.axis()
- .scale(x)
- .orient("bottom");
- var yAxis = d3.svg.axis()
- .scale(y)
- .orient("left");
- var line = d3.svg.line()
- .x(function(d){return x(d.date)})
- .y(function(d){return y(d.temperature)});
- var color = d3.scale.category10();
- var parseDate = d3.time.format("%Y%m%d").parse;
- d3.tsv("country.tsv",function(error,data){
- if(error) throw error;
- data.forEach(function(d){
- d.date = parseDate(d.date);
- })
- color.domain(d3.keys(data[0]).filter(function(d){return d!=="date"}));
- var cities = color.domain().map(function(name){/*map会针对每一个值生成一个数组*/
- return {
- name:name,
- values:data.map(function(d){
- return {
- date:d.date,temperature:+d[name]
- }
- })
- }
- });
- x.domain(d3.extent(data,function(d){return d.date}));//横坐标的值域是date的跨度
- y.domain([
- d3.min(cities,function(a){return d3.min(a.values,function(b){return b.temperature})}),
- d3.max(cities,function(a){return d3.max(a.values,function(b){return b.temperature})})
- ]);/*纵坐标的值域为气温的最小到最大值*/
- var city = svg.selectAll(".city")
- .data(cities)
- .enter() /*数组里面有几个就生成几个g*/
- .append("g")
- .attr("class","city");
- console.log(city);
- city.append("path")
- .attr("d",function(d){return line(d.values)})
- .style("stroke",function(d){return color(d.name)})
- .style("fill","none");
- svg.append("g")
- .call(xAxis)
- .attr("transform","translate("+0+","+height+")");
- svg.append("g")
- .call(yAxis);
- city.append("text")
- .datum(function(d){ return {name: d.name, value: d.values[d.values.length - 1]}; })
- .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
- .text(function(d) { return d.name; });
- console.log(city);
- })
- </script>
- </body>
- </html>
以下是数据信息
country.tsv
- <span style="font-size:14px;">date New York San Francisco Austin
- 20111001 63.4 62.7 72.2
- 20111002 58.0 59.9 67.7
- 20111003 53.3 59.1 69.4
- 20111004 55.7 58.8 68.0
- 20111005 64.2 58.7 72.4
- 20111006 58.8 57.0 77.0
- 20111007 57.9 56.7 82.3
- 20111008 61.8 56.8 78.9
- 20111009 69.3 56.7 68.8
- 20111010 71.2 60.1 68.7
- 20111011 68.7 61.1 70.3
- 20111012 61.8 61.5 75.3
- 20111013 63.0 64.3 76.6
- 20111014 66.9 67.1 66.6
- 20111015 61.7 64.6 68.0
- 20111016 61.8 61.6 70.6
- 20111017 62.8 61.1 71.1
- 20111018 60.8 59.2 70.0
- 20111019 62.1 58.9 61.6
- 20111020 65.1 57.2 57.4
- 20111021 55.6 56.4 64.3
- 20111022 54.4 60.7 72.4
- 20111023 54.4 65.1 72.4
- 20111024 54.8 60.9 72.5
- 20111025 57.9 56.1 72.7
- 20111026 54.6 54.6 73.4
- 20111027 54.4 56.1 70.7
- 20111028 42.5 58.1 56.8
- 20111029 40.9 57.5 51.0
- 20111030 38.6 57.7 54.9
- 20111031 44.2 55.1 58.8
- 20111101 49.6 57.9 62.6
- 20111102 47.2 64.6 71.0
- 20111103 50.1 56.2 58.4
- 20111104 50.1 50.5 45.1
- 20111105 43.5 51.3 52.2
- 20111106 43.8 52.6 73.0
- 20111107 48.9 51.4 75.4
- 20111108 55.5 50.6 72.1
- 20111109 53.7 54.6 56.6
- 20111110 57.7 55.6 55.4
- 20111111 48.5 53.9 46.7
- 20111112 46.8 54.0 62.0
- 20111113 51.1 53.8 71.6
- 20111114 56.8 53.5 75.5
- 20111115 59.7 53.4 72.1
- 20111116 56.5 52.2 65.7
- 20111117 49.6 52.7 56.8
- 20111118 41.5 53.1 49.9
- 20111119 44.3 49.0 71.7
- 20111120 54.0 50.4 77.7
- 20111121 54.1 51.1 76.4
- 20111122 49.4 52.3 68.8
- 20111123 50.0 54.6 57.0
- 20111124 44.0 55.1 55.5
- 20111125 50.3 51.5 61.6
- 20111126 52.1 53.6 64.1
- 20111127 49.6 52.3 51.1
- 20111128 57.2 51.0 43.0
- 20111129 59.1 49.5 46.4
- 20111130 50.6 49.8 48.0
- 20111201 44.3 60.4 48.1
- 20111202 43.9 62.2 60.6
- 20111203 42.1 58.3 62.6
- 20111204 43.9 52.7 57.1
- 20111205 50.2 51.5 44.2
- 20111206 54.2 49.9 37.4
- 20111207 54.6 48.6 35.0
- 20111208 43.4 46.4 37.0
- 20111209 42.2 49.8 45.4
- 20111210 45.0 52.1 50.7
- 20111211 33.8 48.8 48.6
- 20111212 36.8 47.4 52.2
- 20111213 38.6 47.2 60.8
- 20111214 41.9 46.1 70.0
- 20111215 49.6 48.8 64.2
- 20111216 50.2 47.9 50.9
- 20111217 40.6 49.8 51.6
- 20111218 29.1 49.1 55.2
- 20111219 33.7 48.3 62.1
- 20111220 45.8 49.3 56.3
- 20111221 47.4 48.4 47.2
- 20111222 54.4 53.3 52.3
- 20111223 47.8 47.5 45.2
- 20111224 34.9 47.9 43.6
- 20111225 35.9 48.9 42.9
- 20111226 43.6 45.9 48.2
- 20111227 42.9 47.2 45.4
- 20111228 46.2 48.9 44.2
- 20111229 30.8 50.9 50.4
- 20111230 40.8 52.9 52.4
- 20111231 49.8 50.1 53.5
- 20120101 46.3 53.9 55.9
- 20120102 43.2 53.1 48.2
- 20120103 30.3 49.7 41.0
- 20120104 19.2 52.7 48.9
- 20120105 32.1 52.6 54.8
- 20120106 41.2 49.0 61.2
- 20120107 47.0 51.0 59.7
- 20120108 46.0 56.8 52.5
- 20120109 34.7 52.3 54.0
- 20120110 39.4 51.6 47.7
- 20120111 40.4 49.8 49.2
- 20120112 45.4 51.9 48.4
- 20120113 40.7 53.7 40.2
- 20120114 30.4 52.9 43.9
- 20120115 23.9 49.7 45.2
- 20120116 22.6 45.3 65.0
- 20120117 39.8 43.6 68.2
- 20120118 43.2 45.0 47.5
- 20120119 26.3 47.3 57.1
- 20120120 32.8 51.4 61.9
- 20120121 27.4 53.7 54.6
- 20120122 25.0 48.3 56.7
- 20120123 39.4 52.9 54.4
- 20120124 48.7 49.1 52.7
- 20120125 43.0 52.1 61.8
- 20120126 37.1 53.6 55.0
- 20120127 48.2 50.4 50.7
- 20120128 43.7 50.3 52.9
- 20120129 40.1 53.8 44.4
- 20120130 38.0 51.9 49.1
- 20120131 43.5 50.0 62.8
- 20120201 50.4 50.0 64.6
- 20120202 45.8 51.3 61.1
- 20120203 37.5 51.5 70.0
- 20120204 40.8 52.0 61.3
- 20120205 36.5 53.8 48.2
- 20120206 39.1 54.6 44.2
- 20120207 43.2 54.3 51.3
- 20120208 36.5 51.9 49.2
- 20120209 36.5 53.8 45.7
- 20120210 38.3 53.9 54.1
- 20120211 36.9 52.3 44.9
- 20120212 29.7 50.1 36.5
- 20120213 33.1 49.5 44.8
- 20120214 39.6 48.6 52.3
- 20120215 42.3 49.9 68.0
- 20120216 39.7 52.4 54.6
- 20120217 46.0 49.9 53.8
- 20120218 41.2 51.6 56.2
- 20120219 39.8 47.8 50.8
- 20120220 38.1 48.7 53.0
- 20120221 37.1 49.7 61.0
- 20120222 45.5 53.4 68.8
- 20120223 50.6 54.1 69.4
- 20120224 42.7 55.9 59.3
- 20120225 42.6 51.7 47.2
- 20120226 36.9 47.7 47.7
- 20120227 40.9 45.4 61.9
- 20120228 45.9 47.0 67.2
- 20120229 40.7 49.8 70.1
- 20120301 41.3 48.9 62.1
- 20120302 36.8 48.1 72.7
- 20120303 47.6 50.7 59.0
- 20120304 44.2 55.0 51.8
- 20120305 38.5 48.8 55.0
- 20120306 32.9 48.4 61.8
- 20120307 43.3 49.9 67.1
- 20120308 51.2 49.2 72.0
- 20120309 47.8 51.7 46.4
- 20120310 37.2 49.3 46.7
- 20120311 42.9 50.0 56.9
- 20120312 48.8 48.6 61.9
- 20120313 52.6 53.9 68.8
- 20120314 60.5 55.2 71.9
- 20120315 47.2 55.9 72.0
- 20120316 44.7 54.6 72.5
- 20120317 48.2 48.2 71.7
- 20120318 48.2 47.1 71.1
- 20120319 53.1 45.8 73.0
- 20120320 57.8 49.7 63.8
- 20120321 57.5 51.4 60.0
- 20120322 57.3 51.4 62.3
- 20120323 61.7 48.4 61.1
- 20120324 55.8 49.0 62.0
- 20120325 48.4 46.4 64.6
- 20120326 49.8 49.7 66.0
- 20120327 39.6 54.1 65.8
- 20120328 49.7 54.6 69.2
- 20120329 56.8 52.3 69.5
- 20120330 46.5 54.5 73.5
- 20120331 42.2 56.2 73.9
- 20120401 45.3 51.1 75.3
- 20120402 48.1 50.5 75.4
- 20120403 51.2 52.2 77.3
- 20120404 61.0 50.6 67.0
- 20120405 50.7 47.9 71.1
- 20120406 48.0 47.4 70.4
- 20120407 51.1 49.4 73.6
- 20120408 55.7 50.0 71.1
- 20120409 58.3 51.3 70.0
- 20120410 55.0 53.8 69.0
- 20120411 49.0 52.9 69.2
- 20120412 51.7 53.9 74.5
- 20120413 53.1 50.2 73.4
- 20120414 55.2 50.9 76.0
- 20120415 62.3 51.5 74.5
- 20120416 62.9 51.9 63.6
- 20120417 69.3 53.2 67.3
- 20120418 59.0 53.0 65.1
- 20120419 54.1 55.1 67.9
- 20120420 56.5 55.8 68.9
- 20120421 58.2 58.0 65.1
- 20120422 52.4 52.8 65.4
- 20120423 51.6 55.1 70.1
- 20120424 49.3 57.9 67.0
- 20120425 52.5 57.5 75.4
- 20120426 50.5 55.3 77.5
- 20120427 51.9 53.5 77.0
- 20120428 47.4 54.7 77.7
- 20120429 54.1 54.0 77.7
- 20120430 51.9 53.4 77.7
- 20120501 57.4 52.7 77.0
- 20120502 53.7 50.7 77.9
- 20120503 53.1 52.6 79.1
- 20120504 57.2 53.4 80.1
- 20120505 57.0 53.1 82.1
- 20120506 56.6 56.5 79.0
- 20120507 54.6 55.3 79.8
- 20120508 57.9 52.0 70.0
- 20120509 59.2 52.4 69.8
- 20120510 61.1 53.4 71.3
- 20120511 59.7 53.1 69.4
- 20120512 64.1 49.9 72.0
- 20120513 65.3 52.0 72.4
- 20120514 64.2 56.0 72.5
- 20120515 62.0 53.0 67.6
- 20120516 63.8 51.0 69.0
- 20120517 64.5 51.4 72.7
- 20120518 61.0 52.2 73.7
- 20120519 62.6 52.4 77.5
- 20120520 66.2 54.5 75.8
- 20120521 62.7 52.8 76.9
- 20120522 63.7 53.9 78.8
- 20120523 66.4 56.5 77.7
- 20120524 64.5 54.7 80.6
- 20120525 65.4 52.5 81.4
- 20120526 69.4 52.1 82.3
- 20120527 71.9 52.2 80.3
- 20120528 74.4 52.9 80.3
- 20120529 75.9 52.1 82.2
- 20120530 72.9 52.1 81.9
- 20120531 72.5 53.3 82.4
- 20120601 67.2 54.8 77.9
- 20120602 68.3 54.0 81.1
- 20120603 67.7 52.3 82.2
- 20120604 61.9 55.3 81.2
- 20120605 58.3 53.5 83.0
- 20120606 61.7 54.1 83.2
- 20120607 66.7 53.9 82.1
- 20120608 68.7 54.4 77.5
- 20120609 72.2 55.0 77.9
- 20120610 72.6 60.0 82.9
- 20120611 69.2 57.2 86.8
- 20120612 66.9 55.1 85.3
- 20120613 66.7 53.3 76.9
- 20120614 67.7 53.4 84.5
- 20120615 68.5 54.6 84.4
- 20120616 67.5 57.0 83.8
- 20120617 64.2 55.6 82.5
- 20120618 61.7 52.5 82.9
- 20120619 66.4 53.9 82.5
- 20120620 77.9 55.3 81.3
- 20120621 88.3 53.3 80.8
- 20120622 82.2 54.1 81.7
- 20120623 77.0 55.2 83.9
- 20120624 75.4 55.8 85.5
- 20120625 70.9 56.8 87.2
- 20120626 65.9 57.5 88.0
- 20120627 73.5 57.7 89.6
- 20120628 77.4 56.6 86.7
- 20120629 79.6 56.4 85.3
- 20120630 84.2 58.4 81.7
- 20120701 81.8 58.8 78.5
- 20120702 82.5 56.4 83.1
- 20120703 80.2 56.5 83.1
- 20120704 77.8 55.8 84.5
- 20120705 86.1 54.8 84.6
- 20120706 79.9 54.9 84.2
- 20120707 83.5 54.7 86.7
- 20120708 81.5 52.8 84.3
- 20120709 77.8 53.7 83.7
- 20120710 76.1 53.1 77.1
- 20120711 76.3 52.7 77.4
- 20120712 75.8 52.0 80.6
- 20120713 77.2 53.4 81.4
- 20120714 79.3 54.0 80.2
- 20120715 78.9 54.0 81.8
- 20120716 79.6 54.5 77.3
- 20120717 83.3 56.7 80.8
- 20120718 84.3 57.5 81.6
- 20120719 75.1 57.1 80.9
- 20120720 68.4 58.1 83.9
- 20120721 68.4 57.6 85.6
- 20120722 72.2 56.0 83.6
- 20120723 75.6 56.6 84.0
- 20120724 82.6 57.8 83.0
- 20120725 78.4 57.5 84.8
- 20120726 77.0 56.4 84.4
- 20120727 79.4 55.3 84.3
- 20120728 77.4 55.0 83.9
- 20120729 72.5 55.6 85.0
- 20120730 72.9 55.6 84.9
- 20120731 73.6 55.9 86.3
- 20120801 75.0 55.4 86.5
- 20120802 77.7 54.4 85.8
- 20120803 79.7 53.7 85.3
- 20120804 79.6 54.1 86.0
- 20120805 81.5 57.8 84.2
- 20120806 80.0 58.2 81.9
- 20120807 75.7 58.0 86.5
- 20120808 77.8 57.0 86.1
- 20120809 78.6 55.0 86.8
- 20120810 77.8 54.8 88.0
- 20120811 78.5 53.0 85.1
- 20120812 78.8 52.5 87.4
- 20120813 78.6 53.3 88.0
- 20120814 76.8 53.9 88.0
- 20120815 76.7 56.2 87.2
- 20120816 75.9 57.1 86.1
- 20120817 77.6 55.3 86.8
- 20120818 72.6 56.2 84.9
- 20120819 70.4 54.3 76.8
- 20120820 71.8 53.1 80.6
- 20120821 73.6 53.4 80.0
- 20120822 74.7 54.5 78.2
- 20120823 74.6 55.7 79.1
- 20120824 76.0 54.8 81.9
- 20120825 76.2 53.8 84.7
- 20120826 73.4 56.5 83.5
- 20120827 74.6 58.3 82.1
- 20120828 79.4 58.7 84.0
- 20120829 74.7 57.5 85.7
- 20120830 73.5 55.9 87.2
- 20120831 77.9 55.4 82.9
- 20120901 80.7 55.7 84.8
- 20120902 75.1 53.1 83.9
- 20120903 73.5 53.5 85.5
- 20120904 73.5 52.5 86.4
- 20120905 77.7 54.5 85.8
- 20120906 74.2 56.3 85.4
- 20120907 76.0 56.4 85.3
- 20120908 77.1 56.5 81.9
- 20120909 69.7 56.4 74.8
- 20120910 67.8 55.4 71.6
- 20120911 64.0 56.2 75.9
- 20120912 68.1 55.7 82.1
- 20120913 69.3 54.3 80.5
- 20120914 70.0 55.2 70.0
- 20120915 69.3 54.3 71.2
- 20120916 66.3 52.9 70.3
- 20120917 67.0 54.8 72.1
- 20120918 72.8 54.8 73.7
- 20120919 67.2 56.8 72.7
- 20120920 62.1 55.4 71.7
- 20120921 64.0 55.8 72.9
- 20120922 65.5 55.9 73.1
- 20120923 65.7 52.8 75.6
- 20120924 60.4 54.5 78.3
- 20120925 63.2 53.3 78.3
- 20120926 68.5 53.6 79.6
- 20120927 69.2 52.1 76.4
- 20120928 68.7 52.6 77.2
- 20120929 62.5 53.9 75.2
- 20120930 62.3 55.1 71.9</span>
d3系列2--api攻坚战05的更多相关文章
- 【Windows10 IoT开发系列】API 移植工具
原文:[Windows10 IoT开发系列]API 移植工具 Windows 10 IoT Core 中是否提供你的当前 Win32 应用程序或库所依赖的 API? 如果不提供,是否存在可使用的等效 ...
- 痞子衡嵌入式:了解i.MXRTxxx系列ROM API及其与i.MXRT1xxx系列的差异
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRTxxx系列ROM API设计细节. 痞子衡之前写过两篇文章 <利用i.MXRT1xxx系列ROM提供的FlexSPI ...
- d3系列2--api攻坚战02
<html> <head> <style type="text/css"> .area{ fill:steelblue; } </styl ...
- SpringCloud系列之API网关(Gateway)服务Zuul
1.什么是API网关 API网关是所有请求的入口,承载了所有的流量,API Gateway是一个门户一样,也可以说是进入系统的唯一节点.这跟面向对象设计模式中的Facet模式很像.API Gatewa ...
- Kafka实战系列--Kafka API使用体验
前言: kafka是linkedin开源的消息队列, 淘宝的metaq就是基于kafka而研发. 而消息队列作为一个分布式组件, 在服务解耦/异步化, 扮演非常重要的角色. 本系列主要研究kafka的 ...
- Web API 入门系列 - RESTful API 设计指南
参考:https://developer.github.com/v3/ https://github.com/bolasblack/http-api-guide HTTP 协议 目前使用HTTP1. ...
- 【WEB API项目实战干货系列】- API登录与身份验证(三)
上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...
- 【D3】transition API
摘要: 动画类API 一.API 使用 1. 1 d3.ease 1.2 d3.timer Start a custom animation timer, invoking the specified ...
- 【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)(四)
这几天没更新主要是因为没有一款合适的后端框架来支持我们的Web API项目Demo, 所以耽误了几天, 目前最新的代码已经通过Sqlite + NHibernate + Autofac满足了我们基本的 ...
随机推荐
- dpkg: error processing package bluez (--configure) 解决方法【转】
转自:http://blog.csdn.net/heray1990/article/details/47803541 在 Ubuntu 执行 sudo apt-get upgrade 时,出现了如下的 ...
- 《Linux命令、编辑器与shell编程》第三版 学习笔记---002
<Linux命令.编辑器与shell编程>第三版 学习笔记---001 Linux命令.编辑器与shell编程 Shell准备 1.识别Shell类型 echo $0 echo $BAS ...
- python--asyncio模块
申明:本文章参考于https://www.jianshu.com/p/b5e347b3a17c 网络模型有很多种,为了实现高并发也有很多方案,多线程,多进程.无论多线程和多进程,IO的调度更多取决于系 ...
- css3帮你轻松实现圆角效果,不一样的前端页面。
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...
- Netty源码学习(三)NioEventLoop
0. NioEventLoop简介 NioEventLoop如同它的名字,它是一个无限循环(Loop),在循环中不断处理接收到的事件(Event) 在Reactor模型中,NioEventLoop就是 ...
- nodejs微服务
近来公司增加了nodejs微服务 它的主要任务是接收来自于现场的采集数据:作业记录和流转记录,动态构建一个基地的全景实时数据 暂时不涉及数据库. 如果要进行数据库操作,不建议使用本模块, ...
- 网络防嗅探工具SniffJoke
网络防嗅探工具SniffJoke 在渗透测试中,通过网络嗅探,可以获取网络通信主机的各种信息.为了防止嗅探,Kali Linux提供了专用工具SniffJoke.该工具能够自动对用户的网络数据进行 ...
- (转)NSArray类的使用
NSArray的基本应用总结 NSString *string1 = @"two"; NSString *string2 = @"one"; //创建数组 NS ...
- HashSet、LinkedHashSet和TreeSet
关键技术: HashSet采用散列函数对元素进行排序,是专门为快速查询而设计的.存入HashSet的对象必须定义hashCode方法. TreeSet采用红黑树的数据结构进行排序元素,使用它可以从Se ...
- iOS静态库打包
当了三年多程序员,第一次写随便,说来有些惭愧.想成为一个优秀的程序员,分析,思考,总结并且做记录是必不可少的,今天先从简单的命令总结记起.好了,废话不多说了,Let's start our games ...