Ⅰ d3.js怎么处理.csv文件
||如果是基于浏览器,那就不能修改。js读取CSV格式数据，参考如下：<script type="text/javascript"> // This will parse a delimited string into an array of // arrays. The default delimiter is the comma, but this // can be overriden in the second argument. function CSVToArray( strData, strDelimiter ){ // Check to see if the delimiter is defined. If not, // then default to comma. strDelimiter = (strDelimiter || ","); // Create a regular expression to parse the CSV values. var objPattern = new RegExp( ( // Delimiters. "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" + // Quoted fields. "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" + // Standard fields. "([^\"\\" + strDelimiter + "\\r\\n]*))" ), "gi" ); // Create an array to hold our data. Give the array // a default empty first row. var arrData = [[]]; // Create an array to hold our indivial pattern // matching groups. var arrMatches = null; // Keep looping over the regular expression matches // until we can no longer find a match. while (arrMatches = objPattern.exec( strData )){ // Get the delimiter that was found. var strMatchedDelimiter = arrMatches[ 1 ]; // Check to see if the given delimiter has a length // (is not the start of string) and if it matches // field delimiter. If id does not, then we know // that this delimiter is a row delimiter. if ( strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter) ){ // Since we have reached a new row of data, // add an empty row to our data array. arrData.push( [] ); }
Ⅱ D3.js 选择
D3 可以选择一些 HTML 或 SVG 元素并更改它们的样式和/或属性： d3.select 和 d3.selectAll 。
这两个函数都将字符串作为其唯一参数。该字符串指定要选择的元素，并采用 CSS 选择器字符串的形式（例如 div.item ， #my-chart 或 g:first-child ）。
[//]: .classed 是一个 boolean.
除了将常量值传递给 .style , .attr , .classed , .property ,之外 .text ， .html 您还可以传入一个函数。例如：
该函数接受两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 （或“数据”）。 i 是选择中元素的 索引 。
此方法有两个参数：第一个是指定事件类型的字符串;第二个是触发事件时调用的函数（“回调函数”）。此回调函数有两个参数，通常命名为 e 和 d 。 e 是 DOM 事件对象并且 d 是连接数据。
最常见的事件包括（有关详细信息，请参阅 MDN 事件参考）：
在事件回调函数中， this 变量绑定到触发事件的 DOM 元素。这使我们能够执行以下操作：
[//]:这 this 是一个 DOM 元素，而不是 D3 选择，因此如果您想使用 D3 修改它，您必须首先使用 d3.select(this) .
.append 可以使用 D3和 .insert 方法将元素添加到选择的元素中。可以使用 删除元素 .remove 。
.append 将一个元素附加到选择中的每个元素。如果元素已经有子元素，则新元素将成为 最后一个子元素 。第一个参数指定元素的类型。
.insert 类似于 .append 但它允许我们指定第二个参数， 该参数指定（作为 CSS 选择器）在哪个元素之前插入新元素 。
.remove 从页面中 删除选择中的所有元素 。例如，给定一些圆圈，您可以使用以下方法删除它们：
大多数选择方法的返回值是选择本身。这意味着诸如 和 之类的选择方法 .style 可以 .attr 链接 .on 起来。例如：
该 .each 方法允许您为 选择的每个元素 调用一个函数。
回调函数有两个参数，通常命名为 d 和 i 。第一个参数 d 是 连接数据 。 i 是选择中元素的 索引 。 this 关键字是指选择中的当前 HTML 或 SVG 元素。
这是一个示例， .each 用于为每个选择的元素调用函数。该函数计算索引是奇数还是偶数，并相应地修改圆：
该 .call 方法允许调用一个函数， 选择本身 作为第一个参数传递给该函数。
.call 在您想要对选择进行操作的可重用函数时很有用。
例如， colorAll 获取一个选区并将选区元素的填充设置为橙色：
您可以使用 D3 的 .filter 方法过滤选择。第一个参数是一个函数，它返回 true 是否应该包含元素。过滤的选择由该 filter 方法返回，因此您可以继续链接选择方法。
在此示例中，您过滤偶数元素并将它们着色为橙色：
通过调用 .sort 和传入比较器函数对选择中的元素进行排序。比较器函数有两个参数，通常是 a 和 b ，它们代表被比较的两个元素的数据。如果比较器函数返回负数， a 将放在前面 b ，如果是正数， a 将放在后面 b 。
Ⅲ 如何使用d3.js制作可视化图表
D3是目前最流行的JavaScript可视化图表库之一，D3的图表类型非常丰富，并且支持SVG格式，因此应用十分广泛，也有很多图表插件基于D3开发，比如MetricsGraphics.js，在D3上构建的数据图表非常强大。
D3的特点
允许绑定任意数据到DOM，将数据驱动转换应用到Document中。
不仅可以创建精美的HTML表格，而且可以绘制折线图、柱形图和饼图等数据图表。
支持SVG，在Web页面上渲染毫无压力。
回到顶部
D3的使用方法
关于D3的具体用法，可以看D3图形库API参考这篇文章。本文主要对介绍一些经典图表的实现效果及代码。
<!DOCTYPEhtml><metacharset="utf-8"><style>svg{font:10pxsans-serif;}.y.axispath{display:none;}.y.axisline{stroke:#fff;stroke-opacity:.2;shape-rendering:crispEdges;}.y.axis.zeroline{stroke:#000;stroke-opacity:1;}.title{font:30078pxHelveticaNeue;fill:#666;}.birthyear,.age{text-anchor:middle;}.birthyear{fill:#fff;}rect{fill-opacity:.6;fill:#e377c2;}rect:first-child{fill:#1f77b4;}</style><body><scriptsrc="http://d3js.org/d3.v3.min.js"></script><script>varmargin={top:20,right:40,bottom:30,left:20},width=960-margin.left-margin.right,height=500-margin.top-margin.bottom,barWidth=Math.floor(width/19)-1;varx=d3.scale.linear().range([barWidth/2,width-barWidth/2]);vary=d3.scale.linear().range([height,0]);varyAxis=d3.svg.axis().scale(y).orient("right").tickSize(-width).tickFormat(function(d){returnMath.round(d/1e6)+"M";});//AnSVGelementwithabottom-rightorigin.varsvg=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+")");//.varbirthyears=svg.append("g").attr("class","birthyears");//Alabelforthecurrentyear.vartitle=svg.append("text").attr("class","title").attr("dy",".71em").text(2000);d3.csv("population.csv",function(error,data){//Convertstringstonumbers.data.forEach(function(d){d.people=+d.people;d.year=+d.year;d.age=+d.age;});//.varage1=d3.max(data,function(d){returnd.age;}),year0=d3.min(data,function(d){returnd.year;}),year1=d3.max(data,function(d){returnd.year;}),year=year1;//Updatethescaledomains.x.domain([year1-age1,year1]);y.domain([0,d3.max(data,function(d){returnd.people;})]);//[male,female].data=d3.nest().key(function(d){returnd.year;}).key(function(d){returnd.year-d.age;}).rollup(function(v){returnv.map(function(d){returnd.people;});}).map(data);//.svg.append("g").attr("class","yaxis").attr("transform","translate("+width+",0)").call(yAxis).selectAll("g").filter(function(value){return!value;}).classed("zero",true);//(sothatnoenterorexitisrequired).varbirthyear=birthyears.selectAll(".birthyear").data(d3.range(year0-age1,year1+1,5)).enter().append("g").attr("class","birthyear").attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});birthyear.selectAll("rect").data(function(birthyear){returndata[year][birthyear]||[0,0];}).enter().append("rect").attr("x",-barWidth/2).attr("width",barWidth).attr("y",y).attr("height",function(value){returnheight-y(value);});//Addlabelstoshowbirthyear.birthyear.append("text").attr("y",height-4).text(function(birthyear){returnbirthyear;});//Addlabelstoshowage(separate;notanimated).svg.selectAll(".age").data(d3.range(0,age1+1,5)).enter().append("text").attr("class","age").attr("x",function(age){returnx(year-age);}).attr("y",height+4).attr("dy",".71em").text(function(age){returnage;});//.window.focus();d3.select(window).on("keydown",function(){switch(d3.event.keyCode){case37:year=Math.max(year0,year-10);break;case39:year=Math.min(year1,year+10);break;}update();});functionupdate(){if(!(yearindata))return;title.text(year);birthyears.transition().ration(750).attr("transform","translate("+(x(year1)-x(year))+",0)");birthyear.selectAll("rect").data(function(birthyear){returndata[year][birthyear]||[0,0];}).transition().ration(750).attr("y",y).attr("height",function(value){returnheight-y(value);});}});
Ⅳ 谁能告诉我所有的扩展名分别代表什么啊
★常用文件扩展名列表A 对象代码库文件 AAM Authorware shocked文件 AAS Authorware shocked包 ABF Adobe二进制屏幕字体 ABK CorelDRAW自动备份文件 ABS 该类文件有时用于指示一个摘要（就像在一篇有关科学方面的文章的一个摘要或概要，取自abstract） ACE Ace压缩档案格式 ACL CorelDRAW 6键盘快捷键文件 ACM Windows系统目录文件 ACP Microsoft office助手预览文件 ACR 美国放射医学大学文件格式 ACT Microsoft office助手文件 ACV OS/2的驱动程序，用于压缩或解压缩音频数据 AD After Dark屏幕保护程序 ADA Ada源文件（非-GNAT） ADB Ada源文件主体（GNAT）；HP100LX组织者的约定数据库 ADD OS/2用于引导过程的适配器驱动程序 ADF Amiga磁盘文件 ADI AutoCAD设备无关二进制绘图仪格式 ADM After Dark多模块屏幕保护；Windows NT策略模板 ADP FaxWork用于传真调制解调器的交互安装文件；Astound Dynamite文件 ADR After Dark随机屏幕保护；Smart Address的地址簿 ADS Ada源文件说明书（GNAT） AFM Adobe的字体尺度 AF2，AF3 ABC的FlowChat文件 AI Adobe Illustrator格式图形 AIF，AIFF 音频互交换文件，Silicon Graphic and Macintosh应用程序的声音格式 AIFC 压缩AIF AIM AOL即时信息传送 AIS ACDSee图形序列文件；Velvet Studio设备文件 AKW RoboHELP的帮助工程中所有A-关键词 ALAW 欧洲电话音频格式 ALB JASC Image Commander相册 ALL 艺术与书信库 AMS Velvet Studio音乐模块（MOD）文件；Extreme的Tracker模块文件 ANC Canon Computer的调色板文件，包含一系列可选的颜色板 ANI Windows系统中的动画光标 ANS ANSI文本文件 ANT SimAnt For Windows中保存的游戏文件 API Adobe Acrobat使用的应用程序设计接口文件 APR Lotus Approach 97文件 常用文件扩展名及含义（B开头）BIN 二进制文件 BK，BK$ 有时用于代表备份版本 BKS IBM BookManager Read书架文件 BMK 书签文件 BMP Windows或OS/2位图文件 BMI Apogee BioMenace数据文件 BOOK Adobe FrameMaker Book文件 BOX Lotus Notes的邮箱文件 BPL Borlard Delph 4打包库 BQY BrioQuery文件 BRX 用于查看多媒体对象目录的文件 BSC MS Developer Studio浏览器信息文件 BSP Quake图形文件 BS1 Apogee Blake Stone数据文件 BS_ Microsoft Bookshelf Find菜单外壳扩展名 BTM Norton 应用程序使用的批处理文件 BUD Quicken的备份磁盘 BUN CakeWalk 声音捆绑文件(一种MIDI程序) BW SGI黑白图像文件 BWV 商业波形文件 BYU BYU的电影文件格式 B4 Helix Nuts and Bolts文件常用扩展名及含义（C开头）C C代码文件 C0l 台风波形文件 CAB Microsoft压缩档案文件 CAD Softdek的Drafix CAD文件 CAL CALS压缩位图；日历计划表数据 CAM Casio照相机格式 CAP 压缩音乐文件格式 CAS 逗号分开的ASCⅡ文件 CAT Quicken使用 的IntellCharge分类文件 CB Microsoft干净引导文件 CBI 二进制卷格式文件(用于IBM大型机系统) CC Visual dBASE用户自定义类文件 CCA cc：邮件文件 CCB Visual Basic动态按钮配置文件 CCF 多媒体查看器配置文件，用于OS/2 CCH Corel图表文件 CCM Lotus cc：邮箱（例如“INBOX.CCM”） CCO CyberChat数据文件 CCT Macromedia Director Shockwave投影 CDA CD音频轨道 CDF Microsoft频道定义格式文件 CDI Philip的高密盘交互格式 CDM Visual dBASE自定义数据模块文件 CDR CorelDRAW绘图文件；原始音频CD数据文件 CDT CorelDRAW模板 CDX CorelDRAW压缩绘图文件；Microsoft Visual FoxPro索引文件 CEL CIMFast事件语言文件 CER 证书文件（MIME x-x509-ca-cert） CFB Compton的多媒文件 CFG 配置文件 CFM CotdFusion模板文件；Visual dBASE Windows用户定制表单 CGI 公共网关接口脚本文件 CGM 计算机图形元文件 CH OS/2配置文件 CHK 由Windows磁盘碎片整理器或磁盘扫描保存的文件碎片 CHM 编译过的HTML文件 CHR 字符集（字体文件） CHP Ventura Publisher章节文件 CHT ChartViem文件；Harvard Graphics矢量文件 CIF Adaptec CD 创建器 CD映像文件 CIL Clip Gallery下载包 CIM SimCity 2000文件 CIN OS/2改变控制文件用于跟踪INI文件中的变化 CK1 iD/Apogee Commander Keen 1数据文件 CK2 iD/Apogee Commander Keen 2数据文件 CK3 iD/Apogee Commander Keen 3数据文件 CK4 iD /Apogee Commander Keen 4数据文件 CK5 iD /Apogee Commander Keen 5数据文件 CK6 iD /Apogee Commander Keen 6数据文件 CLASS Java类文件 CLL Crick Software Clicker文件 CLP Windows 剪贴板文件 CLS Visual Basic类文件 CMD Windows NT，OS/2的命令文件；DOS CD/M命令文件；dBASEⅡ程序文件 CMF Corel元文件 CMG Chessmaster保存的游戏文件 CMP JPEG位图文件；地址文档 CMV Corel Move动画文件 CMX Corel Presentation Exchange图像 CNF Telnet，Windows和其他其内格式会发生改变的应用程序使用的配置文件 CNM Windows应用程序菜单选项和安装文件 CNQ Compuworks Design Shop文件 CNT Windows（或其他）系统用于帮助索引或其他目的内容文件 COB TrueSpace 2对象文件 COD Microsoft C编译器产生的可显示机器码/汇编代码文件，其中附有源C代码作为注释 COM 命令文件（程序） CPD，CPE 传真覆盖文档 CPI Microsoft MS-DOS代码页信息文件 CPL 控制面板扩展名，Corel颜色板 CPO Corel打印存储文件 CPP C++代码文件 CPR Corel提供说明书文件 CPT Corel 照片-绘画图像 CPX Corel Presentation Exchange压缩图形文件 CRD Windows Cardfile文件 CRP Corel 提供的运行时介绍文件；Visual dBASE自定义报表文件 CRT 认证文件 CSC Corel脚本文件 CSP PC Emcee On_Screen图像 CSS 瀑布式表格文件 CST Macromedia Director Cast文件 CSV 逗号分隔的值文件 CT Scitex CT位图文件；Paint Shop Pro Grapic编辑器文件 CTL 通常用于表示一个包含控件信息的文件；FaxWork用它来保持有关每个传真收到或发出的信息 CUE Microsoft提示牌数据文件 CUR Windows光标文件 CUT Dr Halo位图文件 CV Corel版本的档案文件；Microsoft CodeView信息屏幕文件 CWK ClarisWorks数据文件. CWS ClarisWorks模块 CXT Macromedia Director受保护的（不可编辑的）投影文件 CXX C++源代码文件 常用扩展名及含义（D开头）DAT 数据文件；WrodPerfect合并数据文件；用于一些MPEG格式的文件 DB Borland的Paradox 7表 DBC Microsoft Visual FoxPro数据库容器文件 DBF dBASE文件，一种由Ashton-Tate创建的格式，可以被ACT！、Lipper、FoxPro、Arago、Wordtech、Xbase和类似数据库或与数据库有关产品识别；可用数据文件（能被Excel 97打开）；Oracle 8.1.x表格空间文件 DBX DataBearn图像；Microsoft Visual FoxPro表格文件 DCM DCM模块格式文件 DCR 冲击波文件 DCS 桌面颜色分隔文件 DCT Microsoft Visual FoxPro数据库容器 DCU Delphi编译单元文件 DCX Microsoft Visual FoxPro数据库容器；基于PCX的传真图像；宏 DC5 DataCAD绘图文件 DDF Btrieve或Xtrieve数据定义文件，它包含用于描述Btrieve或Xtrieve文件的元数据 DDIF Digital Equipment或 Compaq格式，用于保存他们图像与字处理文档 DEF SmartWareⅡ数据文件；C++模块定义文件 DEFI Oracle 7 卸载脚本文件 DEM 用于表示数字高度模型的USGS基准的文件 DER 认证文件 DEWF Macintosh Sound Cap/Sound Edit录音设备格式 DGN Macintosh 95 CAD绘图文件 DIB 设备无关位图 DIC 目录 DIF 可进行数据互换的电子表格 DIG DigiLink格式；Sound DesignerⅠ音频文件 DIR MacromediaDirector文件 DIZ 描述文件 DLG C++对话框脚本文件 DLL 动态链接库 DLS 可下载声音文件 DMD Visual dBASE数据模块文件 DMF X-Trakker音乐模块（MOD）文件 DOC FrameMaker或FrameBuilder文档；Word Star文档、Word Perfect文档、Microsoft Word文档；DisplayWrite文档 DOT Microsoft Word文档模板 DPL Borland Delph3压缩库 DPR Borland Delphi工程头文件 DRAW Acorn的基于对象的矢量图像文件 DRV 驱动程序 DRW Micrografx Designer/Draw；Pro/E绘画文件 DSF Micrografx Designer VFX文件 DSG DOOM保存的文件 DSM Dynamic Studio音乐模块（MOD）文件 DSP Microsoft Developer Studio工程文件 DSQ Corel QUERY（查询）文件 DST 刺绣机图形文件 DSW Microsoft Developer Studio工作区文件 DTA Word Bank（世界银行）的STARS数据文件 DTD SGML文档类型定义（DTD）文件 DTED 地面高度数字数据（图形的数据格式）文件 DTF Symantec Q&A相关的数据库数据文件 DTM DigiTrakker模块文件 DUN Microsoft拔号网络导出文件 DV 数字视频文件（MIME） DWD DiamondWare数字化文件 DWG AutoCAD工程图文件；AutoCAD或Generic CADD老版本的绘图格式 DXF 可进行互交换的绘图文件格式，二进制的DWG格式的文本表示；数据交换文件 DXR Macromedia Director受保护（不可编辑）电影文件 D64 Commodore的64位模拟磁盘图像文件 常用扩展名及含义（E开头）EDA Ensoniq ASR磁盘映像 EDD 元素定义文档（FrameMaker+SGML文档） EDE Ensoniq EPS磁盘映像 EDK Ensoniq KT磁盘映像 EDQ Ensoniq SQ1/SQ2/Ks32磁盘映像 EDS Ensoniq SQ80磁盘映像 EDV Ensoniq VFX-SD磁盘映像 EFA Ensoniq ASR文件 EFE Ensoniq EPS文件 EFK Ensoniq KT文件 EFQ Ensoniq SQ1/SQ2/Ks32文件 EFS Ensoniq SQ80文件 EFV Ensoniq VFX-SD文件 EMD ABT扩展模块 EMF Windows增强元文件 EML Microsoft Outlook Express邮件消息（MIME RTC822）文件 ENC 重演文件 ENFF 中性文件格式扩展名 EPHTML Perl解释增强HTML文件 EPS 压缩的PostScript图像 EPSF 压缩的PostScript文件 ERI ERWin文件 ERR 当RobooHELP帮助编译器企图编译一个帮助系统源文件时用来存储错误消息的文件 EPX ERWin文件 ESPS ESPS音频文件 EUI Ensoniq ESP家族的压缩磁盘映像 EVY 特使文档 EWL Microsoft Encarta文档 EXC Microsoft Word禁止字字典 EXE 可执行文件（程序） 常用扩展名及含义（F开头）F FORTRAN文件 F2R Farandoyle线性模块格式 F3R Farandoyle分块线性模块格式 F77 FORTRAN文件 F90 FORTRAN文件 FAR Fradole Composer音乐模块（MOD）文件 FAV Microsoft Outlook导航条 FAX 传真类型图像 FBK Navison 金融备份 FCD 虚拟CD-ROM FDB Navison 金融数据库 FDF Adobe Acrobat表单文档文件 FEM CADRE有限元素网络文件 FFA，FFL，FFO，FFK Microsoft快速查找文件 FFF GUS PnP银行文件格式 FH3 Als Freehand 3绘图文件 FIF Fractal图像文件 FIG REND386/AVRIL使用的文件格式 FITS CCD照相机图像；灵活图像传输系统 FLA Macromedia Flash电影 FLC Autodesk FLIC动画文件 FLF Corel Paradox产生的格式：Navison Financials许可文件；OS/2驱动程序文件 PLI Autodesk FLIC动画 FLT StarTrekker音乐模块(MOD)文件；MultiGen Inc的Open Flight使用的文件格式；Corel过滤器文件 FM Adobe FrameMaker文档 FMB Oracle4.0版或以后版本表单的二进制源代码文件 FML 文件镜象列表（GetRight） FMT Oracle 4.0版或以后版本表单的文本格式；Microsoft Schele+ 打印文件 FMX Oracle 4.0版或以后版本可执行表单 FND Microsoft Explorer保存的搜索文件（Find applet） FNG 字体组文件（字体导航器，Font Navigator） FNK Funk Tracker模块格式 FOG Fontographer模块字体 FON 系统字体 FOR FORTRAN文件 FOT 字体相关文件 FP FileMaker Pro文件 FP1 Flying Pigs for Windows数据文件 FP3 FileMaker Pro文件 FPT FileMaker Pro文件；Microsoft Fox Pro备注字体文件 FPX FlashPix位图 FRM 表单；Frame Maker或Frame Builder文档；Oracle可执行表(3.0版或早期版本)；Visual Basic表单；WordPerfect Merge表单；DataCAD标志报表文件 FRT Microsoft FoxPro报表文件 FRX Visual Basic表单文本；Microsoft FoxPro报表文件 FSF fPrint Audit Tool文件格式 FSL Borland的Paradox 7表单；Corel Paradox保存的表单 FSM Parandoyle示例格式 FT Lotus Notes全文本索引 FTG 全文本搜索组文件，由Windows帮助系统查找时产生——可以删除，并在需要时重建起来 FTS 全文本搜索引文件，由Windows帮助系统查找时产生 FW2 Framework Ⅱ文件 FW3 Framework Ⅲ文件 FW4 Framework Ⅳ文件 FXP 经Microsoft FoxPro编译的源文件 FZB Casio FZ-1银行转储 FZF Casio FZ-1完全转储 FZV Casio FZ-1声音转储常用扩展名及含义（G开头）G721 Raw CCITT G.721 $bit ADPCM格式数据 G723 Raw CCITT G.723 3或5bit ADPCM格式数据 GAL Corel多媒体管理器相集 GCD Generic CADD绘画文件（后续版本） GCP Ground Control Point（地面控制点）文件，用于远景数据形成图像过程，经常用于生成图工程—CHIPS（copenhagen image processing system）使用这些文件 GDB InterBase数据库文件 GDM 铃声、口哨声和声音板模块格式 GED GEDCOM 系谱数据文件，用于记录和交换系谱数据的流行格式；图形环境文档绘画 GEM GEM元文件 GEN Ventura产生的文本文件 GetRight GetRight未完成的下载文件 GFC Patton&Patton FlowCharting 4 flowchart文件 GFI，GFX Genigraphics图形链接表示文件 GHO Norton 克隆磁盘映像 GID Windows 95全局索引文件（包括帮助状态） GIF CompuServe位图文件 GIM，GIX Genigraphics图形链接介绍文件 GKH Ensoniq EPS家簇磁盘映像文件 GNA Genigraphics图形链接介绍文件 GNT 生成代码，Micro Focus属性格式里的可执行代码 GNX Genigraphics图形链接介绍文件 GRA Microsoft Graph文件 GRD 用于远程视景数据产生地图过程的格式文件，通常应用于形成地图工程—CHIPS（copenhagen image processing system）使用这些文件 GRF Grapher（Golden Software公司）图形文件 GRP 程序管理组 GSM Raw GSM 6.10音频流；Raw“byte aligned（比特对齐的）” GSM 6.10音频流；US Robotics语音调制解调器 GTK Graoumftracker（老）音乐模块（MOD）文件 GT2 Graoumftracker（新）音乐模块（MOD）文件 GWX，GWZ Cenigraphis图形链接介绍文件 GZ UNIX gzip压缩文件 常用扩展名及含义（H开头）H C程序头文件 HCM IBM HCM配置文件 HCOM 声音工具HCOM格式 HCR IBM HCD/HCM产品配置文件 HDF 高级计算机应用程序本地中心（NCSA） geospatial Hierarchial数据格式文件 HED HighEdit文档 HEL Microsoft Hellbender格式保存的游戏文件 HEX Macintosh BinHex2.0文件 HGL HP图形语言绘图文件 HH 映射文件，包括一些话题ID和在帮助文件系统中话题的映射数字—允许运行中应用程序发送给用户合适的上下文帮助话题 HLP 帮助文件；Date CAD Windows帮助文件 HOG Lucas Arts的Dark Forces WAD文件 HPJ Visual Basic帮助工程 HPP C++程序头文件 HQX Macintosh BinHex 4.0文件 HST 历史文件 HT HyperTerminal（超级终端） HTM，HTML 超文本文档 HTT Microsoft超文本模板 HTX 扩展HTML模板 HXM Descent2 HAM文件扩展 常用扩展名及含义（I开头）ICA Citrix文件 ICB Targa位图文件 ICC Kodak打印机格式文件 ICL 图标库文件 ICM 图形颜色匹配配置文件 ICO Windows图标 IDB MSDev中间层文件 IDD MIDI设备定义 IDF MIDI设备定义（Windows 95需要的文件） IDQ Internet数据查询文件 IDX Microsoft FoxPro相关数据库索引文件；Symantec Q&A相关数据库索引文件；Microsoft Outlook Express文件 IFF 交换格式文件；Amiga ILBM IGES 初始图形交换说明文件 IGF 插入系统元文件 IIF QuickBooks for Windows交换文件 ILBM 位图图形文件 IMA WinImage磁盘映像文件 IMG GEM映像 IMZ WinImage压缩磁盘映像文件 INC 汇编语言或动态服务器包含文件 INF 信息文件 INI 初始化文件；MWave DSP Synth的“nwsynth.ini” GMS安装；Cravis Ultrasound bank安装 INP Oracle 3.0版或早期版本的表单源代码 INRS INRS远程通信声频 INS InstallShield安装脚本；X-Internet签字文件；Ensoniq EPS字簇设备；Cell/ⅡMAC/PC抽样设备 INT 中间代码，当一个源程序经过语法检查后编译产生一个可执行代码 IOF Findit文档 IQY Microsoft Internet查询文件 ISO 根据ISD 9660有关CD-ROM文件系统标准列出CD-ROM上的文件 ISP X-Internet签字文件 IST 数字跟踪设备文件 ISU InstallShield卸装脚本 IT 脉冲跟踪系统音乐模块(MOD)文件 ITI 脉冲跟踪系统设备 ITS 脉冲跟踪系统抽样，Internet文档位置 IV Open Inventor中使用的文件格式 IVD 超过20/20微观数据维数或变量等级文件 IVP 超过20/20的用户子集配置文件 IVT 超过20/20表或集合数据文件 IVX 超过20/20微数据目录文件 IW Idlewild屏幕保护程序 IWC Install Watch文档 常用扩展名及含义（J开头）J62 Ricoh照相机格式 JAR Java档案文件（一种用于applet和相关文件的压缩文件） JAVA Java源文件 JBF Paint Shop Pro图像浏览文件 JFF，JFIF，JIF JPEG文件 JMP SAS的JMPDiscovery表格统计文件 JN1 Epic MegaGames的Jill of the Jungle数据文件 JPE，JPEG，JPG JPEG图形文件 JS javascript源文件 JSP HTML网页，其中包含有对一个Java servlet的参考 JTF JPEG位图文件 常用扩展名及含义（K开头）K25 Kurzweil 2500抽样文件 KAR 卡拉OK MIDI文件（文本+MIDI） KDC Kodak光增强器 KEY DataCAD图标工具条文件 KFX KoFak Group 4图像文件 KIZ Kodak数字明信片文件 KKW RoboHELP帮助工程索引设计器中与主题无关的K开头的所有关键字 KMP Korg Trinity KeyMap文件 KQP Konica照相机本地文件 KR1 Kurzweil 2000抽样（多软驱）文件 KRZ Kurzweil 2000抽样文件 KSF Korg Trinity抽样文件 KYE Kye游戏数据 常用扩展名及含义（L开头）LAB Visual dBASE标签文件 LBM Deluxe Paint位图文件 LBT，LBX Microsoft FoxPro标签文件 LDB Microsoft Access加锁文件 LDL Corel Paradox分发库 LEG Legacy文档 LES Logitech娱乐系统游戏配置文件（与REC文件一样） LFT 3D Studio（DOS）放样文件 LHA LZH更换文件后缀 LIB 库文件 LIN DataCAD线型文件 LIS 结构化查询报告（SQR）程序产生的输出文件 LLX Laplink交换代理 LNK Windows快捷方式文件 LOG 日志文件 LPD Helix Nut和Bolt文件 LRC Intel可视电话文件 LSL Corel Paradox保存的库文件 LSP AutoLISP、CommonLISP和其他LISP语言文件 LST 列表文件 LU ThoughtWing库单元文件 LVL Parallax Software的 Miner Descent/D2 Level扩展 LWLO Lightwave分层对象文件 LWOB Lightwave对象文件 LWP Lotus WordPro 96/97文件 LWSC Lightwave视景文件 LYR DataCAD层文件 LZH LH ARC压缩档案 LZS Skyroads数据文件常用扩展名及含义（M开头）M1V MPEG相关文件(MIME“mpeg”类型) M3D Corel Motion 3D动画文件 M3U MPEG URL（MIME声音文件） MAC MacPaint图像文件 MAD Microsoft Access模块文件 MAF Microsoft Access表单文件 MAG 在一些日本文件中发现的图形文件格式 MAGIC 魔力邮件监视器配置文件 MAK Visual Basil或Microsoft Visual C++工程文件 MAM Microsoft Access宏 MAN UNIX手册页输出 MAP 映射文件；Duke Nukem 3D WAD游戏文件 MAQ Microsoft Access查询文件 MAR Microsoft Access报表文件 MAS Lotus Freelance Graphics Smart Master文件 MAT Microsoft Access表；3D Studio MAX材料库 MAUD MAUD抽样格式 MAX Kinetx的3DStudio MAX文件；该格式用于一个3D场景文件；Paperport文件；OrCAD设计文件 MAZ Hover迷路数据；Division的dVS/dVISE使用的文件格式 MB1 Apogee Monster Bash数据文件 MBOX Berkeley Unix邮箱格式 MBX Microsoft Outlook保存email格式；Eudora邮箱 MCC Dailerl0呼叫卡 MCP Metrowerks CodeWarrior工程文件 MCR DataCAD键盘宏文件 MCW Microsoft Word的Macintosh文档 MDA Microsoft Access内抽入器；Microsoft Access 2.0版及其后续版本的工作组事件 MDB Microsoft Access数据库 MDE Microsoft Access MDE文件 MDL 数字跟踪器音乐模块（MOD）文件；Quake模 块文件 MDN Microsoft Access空数据库模板 MDW Microsoft Access工作组文件 MDZ Microsoft Access向导模板文件 MED 音乐编辑器，OctaMED音乐模块（MOD）文件 MER 电子表格/数据库数据交换格式；FileMaker、Excel及其他软件能识别 MET 表示管理器元文件 MFG Pro/ENGINEER制造文件 MGF 在材料与几何学里的文件格式 MHTM，MHTML MHTML文档（MIME） MI 杂项 MIC Microsoft Image Composer文件 MID MIDI音乐 MIF Adobe FramMaker交换格式 MIFF 与机器无关格式文件 MIM，MIME，MME Internet邮件扩展格式的多用途文件，经常作为发送e-mail时在AOL里附件而创建的文件；在一个多区MIM文件里的文件能用WinZip或其他类似程序打开 MLI 3D Studio的材料库格式文件 MMF Meal Master格式；一个处方类格式；Microsoft邮件文件 MMG 超过20/20表或集会数据文件 MMM Microsoft多媒体电影 MMP Mindmapor Mind Manager文件 MN2 Descent2任务文件 MND，MNI Mandelbort for Windows MNG 多映像网络图形 MNT,MNX Microsoft FoxPro菜单文件 MNU Visual dBASE菜单文件；Intertel Systems Interact菜单文件 MOD Fast Tracker、Star Trekker、Noise Tracker(等等)音乐模块文件；Microsoft多计划电子表格；Amiga/PC磁道文件 MOV QuickTime for Windows电影 MP2 第二层MPEG音频文件 MP3 第三层MPEG音频文件 MPA MPEG相关文件，MIME“mpeg类型” MPE，MPEG，MPG MPEG动画文件 MPP Microsoft工程文件；CAD绘图文件格式 MPR Microsoft FoxPro菜单（已编译） MRI MRI扫描文件 MSA 魔术阴影档案 MSDL Manchester的场景描述语言 MSG Microsoft邮件消息 MSI Windows 安装器包 MSN Microsoft网络文档；Descent Mission文件 MSP Microsoft Paint（画图）位图文件；Windows Installer路径文件 MST Windows 安装器传输文件 MTM Multi 跟踪器音乐模块（MOD）文件 MUL Ultima在线 MUS 音乐 MUS10 Mus10声音 MVB Microsoft多媒体查看器文件 MWP Lotus WordPro 97 Smart Master文件常用扩展名及含义（N开头）NAP NAP元文件 NCB Microsoft Developer Studio文件 NCD Norton改变目录 NCF NetWare命令文件；Lotus Notes内部剪切板 NDO 3D 低多边形建模器，Nendo netCDF 网络公用数据表单 NFF 中性文件格式 NFT NetObject Fusion模板文件 NIL Norton光标库文件（EasyIcons-兼容） NIST NIST Sphere声音 NLB Oracle 7数据 NLM NetWare可装载模块 NLS 用于本地化的国家语言支持文件（例如，Uniscape） NLU Norton Live Update e-mail 触发器文件 NOD NetObject Fusion文件 NSF Lotus Notes数据库 NSO NetObject Fusion文档文件 t多媒体查看器文件 MWP Lotus WordPro 97 Smart Master文件 NST Noise Tracker音乐模块（MOD）文件 NS2 Lotus Notes数据库（第二版） NTF Lotus Notes数据库模板 NTX CA-Clipper索引文件 NWC Noteworthy Composer歌曲文件 NWS Microsoft Outlook Express新闻消息（MIME RFC822）常用扩展名及含义（O开头）O01 台风声音文件 OBD Microsoft Office活页夹 OBJ 对象文件 OBZ Microsoft Office活页夹向导 OCX Microsoft对象链接与嵌入定制控件 ODS Microsoft Outlook Express邮箱文件 OFF 3D 网状物对象文件格式 OKT Oktalyzer音乐模块（MOD）文件 OLB OLE对象库 OLE OLE对象 OOGL 面向对象图形库 OPL 组织者编程语言源文件——Psion/Symbian OPO OPL输出可执行文件 OPT Microsoft Developer Studio文件 OPX OPL扩展DLL（动态链接库） ORA Oracle 7 配置文件 ORC Oracle 7脚本文件 ORG Lotus Organ
Ⅳ d3.js读取JSON文件数据并输出
//获取复json，这里用的是jquery的ajax方法，只是意制思意思，这里可以替换为任何ajax请求function getData(){ $.ajax({ url: "xxx.php", success: function(jsondata){ output(jsondata); } });}//函数function output(json){ //转换字符串为对象 var Data = eval('(' + json + ')'); var html = ''; for(var i=0;i<Data.length;i++){ //具体键值根据你返回的字符串来 html += '名字' + Data[i].name + ' 年龄' + Data[i].age; } //插入到元素 document.getElementById('el').innerHTML = html;}//每隔10秒执行setTimeout(getData, 10000);
Ⅵ 初识 D3.js ：打造专属可视化
随着现在自定义可视化的需求日益增长，Highcharts、echarts等高度封装的可视化框架已经无法满足用户各种强定制性的可视化需求了，这个时候D3的无限定制的能力就脱颖而出。
如果想要通过D3完成可视化，除了对于D3本身API的学习, 关于web标准的HTML, SVG, CSS, Javascript 和 数据可视化的概念以及标准都是需要学习的。这无疑带来了较高的学习门槛，但这也是值得的，因为掌握 D3 后，我们几乎可以实现任何 2d 的可视化需求。
本文通过对D3核心模块分析以及进行具体案例实践的方式，来帮助初学者学习了解D3的绘图思路。
D3的全称是 Data-Driven Documents（数据驱动文档），是基于数据来操作文档的 JavaScript 库，其核心在于使用绘图指令对数据进行转换，在源数据的基础上创建新的可绘制数据， 生成SVG路径以及通过数据和方法在DOM中创建数据可视化元素（如轴）。
相对于Echats等开箱即用的可视化框架来说，D3更接近底层，它可以直接控制原生的SVG元素，并且不直接提供任何一种现成的可视化图表，所有的图表都需我们在它的库里挑选合适的方法构建而成，这也大大提高了它的可视化定制能力。而且D3 没有引入新的图形元素，它遵循了web标准（HTML, CSS, SVG 以及 Canvas ）来展示数据 ，所以它可以不需要依赖其他框架独立运行在现代浏览器中。
在V4版本后，D3的 API 现在已经被拆分成一个个模块，我们可以根据自己的可视化需求进行按需加载。根据泛义可以将D3 API模块分为以下的几大类： DOM操作、数据处理，数据分析转换、地理路径，行为等 。
这里我们主要对 D3-selection 和 D3-scale 模块进行解析：
D3-selection （选择集） 是 D3js的核心模块，主要是用来进行选择元素，设置属性、数据绑定，事件绑定等操作。
选择元素： D3-selection 提供了两种方法来获取目标元素，d3.select()：返回目标元素的第一个节点，d3.selectAll()：返回目标元素的集合，乍一看有点类似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一个 selection 对象，querySelector 返回的是一个 NodeList 数组。通过控制台打印的信息，可以看到 selection 下的 groups 存放了所有选择的元素集合，parents 存放了所有选中元素的父节点。
设置属性或者绑定事件： 我们不需要关心 groups 的结构是怎么样的。当调用 selection.attr 或者 selection.style 的时候, selection 中的所有 group 的所有子元素都会被调用，group 存在的唯一影响是: 当我们传参是一个function 的时候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 时， 传递的 function(data, i) 中, 第二个参数 i 是元素在 group 中的索引而不是在整个 selection 中的索引。
数据绑定： 实际上是给选择的DOM元素的 __data__ 属性赋值，这里提供了3种方式进行数据绑定：
（1）给每一个单独的 DOM 元素调用 selection.datum：d3.select('body').datum(20) 等价于 document.body.__data__ = 20
（2）从父节点中继承来数据, 比如: append , insert , select，子节点会主动继承父节点的数据：
（3） 调用 selection.data() 方法，支持传入装有基础数据类型的数据，也支持传入一个function(parentNode, groupIndex)根据节点索引与数据做映射，data()方法引入了 d3 中非常重要的 join 思想:
绑定 data 到 DOM 元素， 在D3中是通过比较 data 和 DOM 的 key 值来找到对应关系的。 如果我们没有单独设置 key 值，那么默认根据 data 的下标索引来设定，但是当数据顺序发生改变，这个默认下标 key 值 就变得不可靠了，这时我们可以使用 selection.data(data, keyFunction) 中的第二个参数 keyFunction，根据当前的数据返回一个对应的 key 值。通过下面的图例可以看出，不管是有一个还是多个 group（每个group 都是独立的），只要我们保证在任意一个 group 中的 key 值是唯一的，数据一旦发生变化都会反映给对应的 DOM 元素（ update 的过程）：
上面提到的都是data数据和DOM元素数量相同的情况下的数据绑定，那如果data数据和DOM元素数量不相同时，我们来看看 D3 又是如何进行数据绑定的：现在终于可以来介绍 D3-selecion 模块的核心 Join 思想了，这个思想简单来说就是 “不应该告诉D3去怎么创建元素, 而是告诉D3，.selectAll() 得到的 selecion 集合应该和 .data(data) 绑定的数据要怎么一一对应”。
从上图可以看出，在进行 d3.data(data) 数据绑定的时候，会产生三种状态的选择集：
用 Join 的方式来理解意味着，我们要做的事情仅仅是声明 DOM集合和数据集合之间的关系, 并且通过处理三个不同状态的集合 enter、update 、 exit 来描述这种关系。这种方式可以大大简化我们对DOM元素的操作，我们不需要再用 if 和 for 循环的方式来进行复杂的逻辑判断，来得到我们需要得到的元素集合。并且在处理动态数据的时候，可以通过处理这三种状态，轻松的展示实时数据和添加平滑的动态交互效果。
D3-scale （比列尺） 提供多种不同类型的比例尺。经常和 D3-axis 坐标轴模块一起使用。
D3-scale 提供了多种连续性和非连续性的比例尺，总体可以将他们分为三大类：
常用的一些比例尺：
（1）d3-scaleLinear 线性比例尺(连续性输入和连续性输出)
可以看出，调用d3.scaleLinear()可以生成线性比例尺，domain()是输入域，range()是输出域，相当于将domain中的数据集映射到range的数据集中。
使用示例：
映射关系：
（2）d3-scaleTime 时间比例尺(连续性输入和连续性输出)
时间比例尺与线性比例尺类似，只不过输入域变成了一个时间轴。正常我们使用比例尺都是个正序的过程，但是D3也提供了invert()以及invertExtent()方法，我们可以通过输出域中的具体值得出对应输入域的值。
使用示例：
（3）d3.scaleQuantize 量化比例尺(连续性输入和离散性输出)
量化比例尺是将连续的输入域根据输出域被分割为均匀的片段，所以它的输出域是离散的。
使用示例：
映射关系：
（4）d3. scaleThreshold 阈值比例尺(连续性输入和离散性输出)
阈值比例尺可以为一组连续数据指定分割阈值，阈值比例尺默认的 domain：[0.5] 以及默认的 range：[0, 1] ，因此默认的 d3.scaleThreshold() 等价于 Math.round 函数。 阈值比例尺输入域为 N 的话，输出域必须为 N + 1，否则比例尺对某些值可能会返回 undefined，或者输出域多余的值会被忽略。
使用示例：
存在三种映射关系：
a. 当domain和range的数据是 N : N+1
b. 当domain和range的数据是 N : N + 大于1
c. 当domain和range的数据是 N + 大于0 : N
（5）d3.scaleOrdinal 序数比例尺(离散性输入和离散性输出)
与scaleLinear等连续性比例尺不同，序数比例尺的输出域和输入域都是离散的。
使用示例：
存在三种映射关系：
a.当domain和range的数据是一一对应
b.当domain少于range的数据
c.当domain多于range的数据
通过以上的学习，应该对d3是如何操作DOM以及坐标轴的数据映射为相应的可视化表现有了一定的了解，下面我们来实际运用这两个模块，来实现我们常见的可视化图表：柱状图。
（1）首先添加一个SVG元素。
（2）根据我们上面说到 d3.scale 模块以及 d3.axis 模块绘制坐标轴，d3.scaleBand() 叫做序数分段比例尺，类似我们说的 d3.scaleOrdinal() 序数比例尺，但是它支持连续的数值类型的输出域，离散的输入域可以将连续的范围划分为均匀的分段。这里再讲一个细节，在绘制网格的时候，我们并没有额外添加 line 元素来实现，而是通过 d3.axis 坐标轴模块的 axis.ticks() 方法对坐标轴刻度进行了设置，通过 tickSIze() 设置了刻度线长度，来模拟和图表宽度相等的网格线，并且还可以通过 tickFormat() 对Y轴刻度值进行格式化转换。
（3）坐标轴绘制好了后，我们通过数据绑定来绘制与之对应的矩形(rect)元素了。
（4）这个时候柱状图已经基本绘制好了，我们再丰富内容展示，添加标签、标题等提示信息。
（5）最后我们通过给柱子绑定监听事件，实现tooltips的信息浮层交互。
通过对 d3.selection 、d3.scale 以及 d3.axis等模块的学习，我们已经可以绘制出常用的柱状图等图表，我们也可以通过d3提供的其他模块绘制出更加复杂的可视化效果，例如通过 d3-hierarchy(层级模块) 实现层级树图可视化，d3-geo(地理投影) 实现地图数据可视化等，本文讲解的内容还只是D3库的冰山一角。所以等我们掌握了D3后，限制我们实现可视化的不再是技术而是想象力。
