{"id":644,"date":"2015-02-15T17:41:32","date_gmt":"2015-02-15T09:41:32","guid":{"rendered":"http:\/\/www.daliane.com\/?p=644"},"modified":"2015-02-15T17:41:32","modified_gmt":"2015-02-15T09:41:32","slug":"d3_js_xue_xi_bi_ji_ba_zhe_xian_tu_de_shu_biao_xiang_ying_he_xiang_xia_zuan_qu","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/d3_js_xue_xi_bi_ji_ba_zhe_xian_tu_de_shu_biao_xiang_ying_he_xiang_xia_zuan_qu\/","title":{"rendered":"D3.js\u5b66\u4e60\u7b14\u8bb0\u516b:\u6298\u7ebf\u56fe\u7684\u9f20\u6807\u54cd\u5e94\u548c\u5411\u4e0b\u94bb\u53d6"},"content":{"rendered":"
\n

\u8981\u89e3\u51b3\u7684\u95ee\u9898<\/p>\n

\u6211\u5f53\u521d\u4e3a\u4ec0\u4e48\u9009\u62e9D3.js\uff1f\u4e0d\u662f\u56e0\u4e3a\u5b83\u7684\u56fe\u50cf\u591a\u4e48\u7eda\u4e3d\uff0c\u90a3\u662f\u4f5c\u56fe\u8f6f\u4ef6\u7684\u57fa\u672c\u529f\u80fd\uff0c\u5982\u679c\u53ea\u662f\u4e3a\u4e86\u505a\u4e00\u4e9b\u9759\u6001\u56fe\u50cf\uff0c\u90a3\u6ca1\u6709\u5fc5\u8981\u8d39\u52b2\u6765\u5199\u8fd9\u4e2a\u4ee3\u7801\uff0c\u9009\u62e9\u5b83\uff0c\u4e3b\u8981\u662f\u56e0\u4e3a\u5b83\u5728\u4f5c\u56fe\u7684\u540c\u65f6\u8fd8\u5177\u6709\u4ea4\u4e92\u6027\uff0c\u80fd\u591f\u81ea\u7531\u64cd\u63a7\u56fe\u50cf\u5143\u7d20\uff0c\u8fd9\u624d\u662fSVG\u7684\u7cbe\u534e\u6240\u5728\u3002\u76ee\u524d\u4e3a\u6b62\uff0c\u5df2\u7ecf\u5b8c\u6210\u4e86\u6298\u7ebf\u56fe\u7684\u7ed8\u5236\u5de5\u4f5c\uff0c\u63a5\u4e0b\u6765\u4e3a\u6298\u7ebf\u56fe\u8bbe\u7f6e\u4ea4\u4e92\u884c\u4e3a\u3002<\/p>\n

\u4e3a\u6298\u7ebf\u56fe\u589e\u52a0\u9f20\u6807\u60ac\u505c\u884c\u4e3a<\/p>\n

\u5728\u6298\u7ebf\u56fe\u7684\u5706\u70b9\u4e0a\u8bbe\u7f6e\u9f20\u6807\u76d1\u63a7\u4e8b\u4ef6\uff0c\u5f53\u9f20\u6807\u79fb\u52a8\u5230\u5706\u5f62\u4e0a\uff0c\u663e\u793a\u4e3a\u624b\u578b\u5e76\u663e\u793a\u63d0\u793a\uff0c\u663e\u793a\u624b\u578b\uff0c\u53ea\u9700\u8981\u4e3a\u5706\u70b9\u6dfb\u52a0\u5c5e\u6027.attr(“cursor”,”pointer”)\u5c31\u53ef\u4ee5\u4e86\u3002\u663e\u793a\u63d0\u793a\u7684\u8bdd\uff0c\u6211\u4eec\u9996\u5148\u4e3a\u63d0\u793a\u6587\u5b57\u505a\u4e00\u4e9b\u6837\u5f0f\u3002<\/p>\n

\n
.tiptools
\n{
\ndisplay:block;
\nbackground-color:#FFF;
\nborder:1px solid #E7E7E7;
\npadding:10px;
\nfont-size:12px;
\nfont-family:Arial, Helvetica, sans-serif;
\ncursor:pointer;
\n}<\/div>\n<\/div>\n

\u7136\u540e\u4fa6\u542c\u5706\u70b9\u7684\u9f20\u6807\u7ecf\u8fc7\uff08mouseover\uff09\u548c\u79bb\u5f00\uff08mouseout\uff09\u4e8b\u4ef6\uff0c\u4e3a\u5b83\u4eec\u6dfb\u52a0\u54cd\u5e94\u51fd\u6570,\u4e3a\u4e86\u80fd\u591f\u5728\u9f20\u6807\u79bb\u5f00\u7684\u65f6\u5019\u5220\u9664\u63d0\u793a\uff0c\u6211\u4eec\u4e3a\u63d0\u793a\u7684Group\u6dfb\u52a0\u4e86\u4e00\u4e2aid\u5c5e\u6027\uff0c\u5728\u9f20\u6807\u79bb\u5f00\u65f6\u5019\uff0c\u4f7f\u7528 d3.select(“#[id]”)\u8fd9\u6837\u7684\u8bed\u53e5\u6765\u5b9a\u4f4d\u5b83\u3002<\/p>\n

\n
this.group.selectAll(“circle”)
\n.on(“mouseover”,function(d,i){
\nvar tx=parseFloat(d3.select(this).attr(“cx”));
\nvar ty=parseFloat(d3.select(this).attr(“cy”));var tips=svg.append(“g”)
\n.attr(“id”,”tips”);<\/p>\n

var tipRect=tips.append(“rect”)
\n.attr(“x”,tx+10)
\n.attr(“y”,ty+10)
\n.attr(“width”,120)
\n.attr(“height”,30)
\n.attr(“fill”,”#FFF”)
\n.attr(“stroke-width”,1)
\n.attr(“stroke”,”#CCC”);<\/p>\n

var tipText=tips.append(“text”)
\n.attr(“class”,”tiptools”)
\n.text(lineNames[id]+”\\r\\n”+xMarks[i]+”\\r\\n”+d)
\n.attr(“x”,tx+20)
\n.attr(“y”,ty+30);
\n})
\n.on(“mouseout”,function(d,i){
\nd3.select(“#tips”).remove();
\n});<\/p>\n<\/div>\n<\/div>\n

\u5bdf\u770b\u65b0\u7684\u52a8\u753b\u6f14\u793a\u6548\u679c\uff1a<\/p>\n

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
<\/td>\n<!DOCTYPE html><\/span><\/td>\n<\/tr>\n
<\/td>\n<html><\/span><\/td>\n<\/tr>\n
<\/td>\n<head><\/span><\/td>\n<\/tr>\n
<\/td>\n<meta charset<\/span>=”utf-8<\/span>“><\/span><\/td>\n<\/tr>\n
<\/td>\n<title><\/span>\u753b\u4e00\u4e2a\u6298\u7ebf\u56fe<\/title><\/span><\/td>\n<\/tr>\n
<\/td>\n<script type<\/span>=”text\/javascript<\/span>” src<\/span>=”js\/d3.js<\/a>“><\/span><\/script><\/span><\/td>\n<\/tr>\n
<\/td>\n<\/head><\/span><\/td>\n<\/tr>\n
<\/td>\n<style type<\/span>=”text\/css<\/span>“><\/span><\/td>\n<\/tr>\n
<\/td>\nbody{<\/td>\n<\/tr>\n
<\/td>\nheight: 100%;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n.title{font-family:Arial,\u5fae\u8f6f\u96c5\u9ed1;font-size:18px;text-anchor:middle;}<\/td>\n<\/tr>\n
<\/td>\n.subTitle{font-family:Arial,\u5b8b\u4f53;font-size:12px;text-anchor:middle;fill:#666}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n.axis path,<\/td>\n<\/tr>\n
<\/td>\n.axis line {<\/td>\n<\/tr>\n
<\/td>\nfill: none;<\/td>\n<\/tr>\n
<\/td>\nstroke: black;<\/td>\n<\/tr>\n
<\/td>\nshape-rendering: crispEdges;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n.axis text {<\/td>\n<\/tr>\n
<\/td>\nfont-family: sans-serif;<\/td>\n<\/tr>\n
<\/td>\nfont-size: 11px;<\/td>\n<\/tr>\n
<\/td>\nfill:#999;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n.inner_line path,<\/td>\n<\/tr>\n
<\/td>\n.inner_line line {<\/td>\n<\/tr>\n
<\/td>\nfill: none;<\/td>\n<\/tr>\n
<\/td>\nstroke:#E7E7E7;<\/td>\n<\/tr>\n
<\/td>\nshape-rendering: crispEdges;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n.legend{font-size: 12px; font-family:Arial, Helvetica, sans-serif}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n.tiptools<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\ndisplay:block;<\/td>\n<\/tr>\n
<\/td>\nbackground-color:#FFF;<\/td>\n<\/tr>\n
<\/td>\nborder:1px solid #E7E7E7;<\/td>\n<\/tr>\n
<\/td>\npadding:10px;<\/td>\n<\/tr>\n
<\/td>\nfont-size:12px;<\/td>\n<\/tr>\n
<\/td>\nfont-family:Arial, Helvetica, sans-serif;<\/td>\n<\/tr>\n
<\/td>\ncursor:pointer;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n<\/style><\/span><\/td>\n<\/tr>\n
<\/td>\n<body><\/span><\/td>\n<\/tr>\n
<\/td>\n<script type<\/span>=”text\/javascript<\/span>“><\/span><\/td>\n<\/tr>\n
<\/td>\nvar dataset=[];<\/td>\n<\/tr>\n
<\/td>\nvar lines=[]; \/\/\u4fdd\u5b58\u6298\u7ebf\u56fe\u5bf9\u8c61<\/td>\n<\/tr>\n
<\/td>\nvar xMarks=[];<\/td>\n<\/tr>\n
<\/td>\nvar lineNames=[]; \/\/\u4fdd\u5b58\u7cfb\u5217\u540d\u79f0<\/td>\n<\/tr>\n
<\/td>\nvar lineColor=[“#F00″,”#09F”,”#0F0″];<\/td>\n<\/tr>\n
<\/td>\nvar w=600;<\/td>\n<\/tr>\n
<\/td>\nvar h=400;<\/td>\n<\/tr>\n
<\/td>\nvar padding=40;<\/td>\n<\/tr>\n
<\/td>\nvar currentLineNum=0;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u7528\u4e00\u4e2a\u53d8\u91cf\u5b58\u50a8\u6807\u9898\u548c\u526f\u6807\u9898\u7684\u9ad8\u5ea6\uff0c\u5982\u679c\u6ca1\u6709\u6807\u9898\u4ec0\u4e48\u7684\uff0c\u5c31\u4e3a0<\/td>\n<\/tr>\n
<\/td>\nvar head_height=padding;<\/td>\n<\/tr>\n
<\/td>\nvar title=”\u6536\u652f\u5e73\u8861\u7edf\u8ba1\u56fe”;<\/td>\n<\/tr>\n
<\/td>\nvar subTitle=”2013\u5e741\u6708 \u81f3 2013\u5e746\u6708”;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u7528\u4e00\u4e2a\u53d8\u91cf\u8ba1\u7b97\u5e95\u90e8\u7684\u9ad8\u5ea6\uff0c\u5982\u679c\u4e0d\u662f\u591a\u7cfb\u5217\uff0c\u5c31\u4e3a0<\/td>\n<\/tr>\n
<\/td>\nvar foot_height=padding;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6a21\u62df\u6570\u636e<\/td>\n<\/tr>\n
<\/td>\ngetData();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5224\u65ad\u662f\u5426\u591a\u7ef4\u6570\u7ec4\uff0c\u5982\u679c\u4e0d\u662f\uff0c\u5219\u8f6c\u4e3a\u591a\u7ef4\u6570\u7ec4\uff0c\u8fd9\u4e9b\u5904\u7406\u662f\u4e3a\u4e86\u5904\u7406\u5916\u90e8\u4f20\u9012\u7684\u53c2\u6570\u8bbe\u7f6e\u7684\uff0c\u73b0\u5728\u6570\u636e\u6807\u51c6\uff0c\u6ca1\u4ec0\u4e48\u7528<\/td>\n<\/tr>\n
<\/td>\nif(!(dataset[0] instanceof Array))<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar tempArr=[];<\/td>\n<\/tr>\n
<\/td>\ntempArr.push(dataset);<\/td>\n<\/tr>\n
<\/td>\ndataset=tempArr;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u4fdd\u5b58\u6570\u7ec4\u957f\u5ea6\uff0c\u4e5f\u5c31\u662f\u7cfb\u5217\u7684\u4e2a\u6570<\/td>\n<\/tr>\n
<\/td>\ncurrentLineNum=dataset.length;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u56fe\u4f8b\u7684\u9884\u7559\u4f4d\u7f6e<\/td>\n<\/tr>\n
<\/td>\nfoot_height+=25;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u753b\u5e03<\/td>\n<\/tr>\n
<\/td>\nvar svg=d3.select(“body”)<\/td>\n<\/tr>\n
<\/td>\n.append(“svg”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“width”,w)<\/td>\n<\/tr>\n
<\/td>\n.attr(“height”,h);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u80cc\u666f<\/td>\n<\/tr>\n
<\/td>\nsvg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.append(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,0)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,0)<\/td>\n<\/tr>\n
<\/td>\n.attr(“width”,w)<\/td>\n<\/tr>\n
<\/td>\n.attr(“height”,h)<\/td>\n<\/tr>\n
<\/td>\n.style(“fill”,”#FFF”)<\/td>\n<\/tr>\n
<\/td>\n.style(“stroke-width”,2)<\/td>\n<\/tr>\n
<\/td>\n.style(“stroke”,”#E7E7E7″);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u6807\u9898<\/td>\n<\/tr>\n
<\/td>\nif(title!=””)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nsvg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.append(“text”)<\/td>\n<\/tr>\n
<\/td>\n.text(title)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”title”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,w\/2)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,head_height);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nhead_height+=30;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u526f\u6807\u9898<\/td>\n<\/tr>\n
<\/td>\nif(subTitle!=””)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nsvg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.append(“text”)<\/td>\n<\/tr>\n
<\/td>\n.text(subTitle)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”subTitle”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,w\/2)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,head_height);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nhead_height+=20;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nmaxdata=getMaxdata(dataset);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6a2a\u5750\u6807\u8f74\u6bd4\u4f8b\u5c3a<\/td>\n<\/tr>\n
<\/td>\nvar xScale = d3.scale.linear()<\/td>\n<\/tr>\n
<\/td>\n.domain([0,dataset[0].length-1])<\/td>\n<\/tr>\n
<\/td>\n.range([padding,w-padding]);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u7eb5\u5750\u6807\u8f74\u6bd4\u4f8b\u5c3a<\/td>\n<\/tr>\n
<\/td>\nvar yScale = d3.scale.linear()<\/td>\n<\/tr>\n
<\/td>\n.domain([0,maxdata])<\/td>\n<\/tr>\n
<\/td>\n.range([h-foot_height,head_height]);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u6a2a\u8f74\u7f51\u683c\u7ebf<\/td>\n<\/tr>\n
<\/td>\nvar xInner = d3.svg.axis()<\/td>\n<\/tr>\n
<\/td>\n.scale(xScale)<\/td>\n<\/tr>\n
<\/td>\n.tickSize(-(h-head_height-foot_height),0,0)<\/td>\n<\/tr>\n
<\/td>\n.tickFormat(“”)<\/td>\n<\/tr>\n
<\/td>\n.orient(“bottom”)<\/td>\n<\/tr>\n
<\/td>\n.ticks(dataset[0].length);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u6a2a\u8f74\u7f51\u683c\u7ebf<\/td>\n<\/tr>\n
<\/td>\nvar xInnerBar=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”inner_line”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“transform”, “translate(0,” + (h – padding) + “)”)<\/td>\n<\/tr>\n
<\/td>\n.call(xInner);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u7eb5\u8f74\u7f51\u683c\u7ebf<\/td>\n<\/tr>\n
<\/td>\nvar yInner = d3.svg.axis()<\/td>\n<\/tr>\n
<\/td>\n.scale(yScale)<\/td>\n<\/tr>\n
<\/td>\n.tickSize(-(w-padding*2),0,0)<\/td>\n<\/tr>\n
<\/td>\n.tickFormat(“”)<\/td>\n<\/tr>\n
<\/td>\n.orient(“left”)<\/td>\n<\/tr>\n
<\/td>\n.ticks(10);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u7eb5\u8f74\u7f51\u683c\u7ebf<\/td>\n<\/tr>\n
<\/td>\nvar yInnerBar=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”, “inner_line”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“transform”, “translate(“+padding+”,0)”)<\/td>\n<\/tr>\n
<\/td>\n.call(yInner);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u6a2a\u8f74<\/td>\n<\/tr>\n
<\/td>\nvar xAxis = d3.svg.axis()<\/td>\n<\/tr>\n
<\/td>\n.scale(xScale)<\/td>\n<\/tr>\n
<\/td>\n.orient(“bottom”)<\/td>\n<\/tr>\n
<\/td>\n.ticks(dataset[0].length);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u6a2a\u5750\u6807\u8f74<\/td>\n<\/tr>\n
<\/td>\nvar xBar=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”axis”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“transform”, “translate(0,” + (h – foot_height) + “)”)<\/td>\n<\/tr>\n
<\/td>\n.call(xAxis);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u901a\u8fc7\u7f16\u53f7\u83b7\u53d6\u5bf9\u5e94\u7684\u6a2a\u8f74\u6807\u7b7e<\/td>\n<\/tr>\n
<\/td>\nxBar.selectAll(“text”)<\/td>\n<\/tr>\n
<\/td>\n.text(function(d){return xMarks[d];});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u7eb5\u8f74<\/td>\n<\/tr>\n
<\/td>\nvar yAxis = d3.svg.axis()<\/td>\n<\/tr>\n
<\/td>\n.scale(yScale)<\/td>\n<\/tr>\n
<\/td>\n.orient(“left”)<\/td>\n<\/tr>\n
<\/td>\n.ticks(10);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u7eb5\u8f74<\/td>\n<\/tr>\n
<\/td>\nvar yBar=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”, “axis”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“transform”, “translate(“+padding+”,0)”)<\/td>\n<\/tr>\n
<\/td>\n.call(yAxis);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u56fe\u4f8b<\/td>\n<\/tr>\n
<\/td>\nvar legend=svg.append(“g”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\naddLegend();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u6298\u7ebf<\/td>\n<\/tr>\n
<\/td>\nlines=[];<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<currentLineNum;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar newLine=new CrystalLineObject();<\/td>\n<\/tr>\n
<\/td>\nnewLine.init(i);<\/td>\n<\/tr>\n
<\/td>\nlines.push(newLine);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u91cd\u65b0\u4f5c\u56fe<\/td>\n<\/tr>\n
<\/td>\nfunction drawChart()<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar _duration=1000;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\ngetData();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\naddLegend();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u8bbe\u7f6e\u7ebf\u6761\u52a8\u753b\u8d77\u59cb\u4f4d\u7f6e<\/td>\n<\/tr>\n
<\/td>\nvar lineObject=new CrystalLineObject();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<dataset.length;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nif(i<currentLineNum)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5bf9\u5df2\u6709\u7684\u7ebf\u6761\u505a\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nlineObject=lines[i];<\/td>\n<\/tr>\n
<\/td>\nlineObject.movieBegin(i);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\nelse<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5982\u679c\u73b0\u6709\u7ebf\u6761\u4e0d\u591f\uff0c\u5c31\u52a0\u4e0a\u4e00\u4e9b<\/td>\n<\/tr>\n
<\/td>\nvar newLine=new CrystalLineObject();<\/td>\n<\/tr>\n
<\/td>\nnewLine.init(i);<\/td>\n<\/tr>\n
<\/td>\nlines.push(newLine);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5220\u9664\u591a\u4f59\u7684\u7ebf\u6761\uff0c\u5982\u679c\u6709\u7684\u8bdd<\/td>\n<\/tr>\n
<\/td>\nif(dataset.length<currentLineNum)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nfor(i=dataset.length;i<currentLineNum;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nlineObject=lines[i];<\/td>\n<\/tr>\n
<\/td>\nlineObject.remove();<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\nlines.splice(dataset.length,currentLineNum-dataset.length);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nmaxdata=getMaxdata(dataset);<\/td>\n<\/tr>\n
<\/td>\nnewLength=dataset[0].length;<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6a2a\u8f74\u6570\u636e\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nxScale.domain([0,newLength-1]);<\/td>\n<\/tr>\n
<\/td>\nxAxis.scale(xScale).ticks(newLength);<\/td>\n<\/tr>\n
<\/td>\nxBar.transition().duration(_duration).call(xAxis);<\/td>\n<\/tr>\n
<\/td>\nxBar.selectAll(“text”).text(function(d){return xMarks[d];});<\/td>\n<\/tr>\n
<\/td>\nxInner.scale(xScale).ticks(newLength);<\/td>\n<\/tr>\n
<\/td>\nxInnerBar.transition().duration(_duration).call(xInner);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u7eb5\u8f74\u6570\u636e\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nyScale.domain([0,maxdata]);<\/td>\n<\/tr>\n
<\/td>\nyBar.transition().duration(_duration).call(yAxis);<\/td>\n<\/tr>\n
<\/td>\nyInnerBar.transition().duration(_duration).call(yInner);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5f00\u59cb\u7ebf\u6761\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<lines.length;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nlineObject=lines[i];<\/td>\n<\/tr>\n
<\/td>\nlineObject.reDraw(i,_duration);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\ncurrentLineNum=dataset.length;<\/td>\n<\/tr>\n
<\/td>\ndataLength=newLength;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5b9a\u4e49\u6298\u7ebf\u7c7b<\/td>\n<\/tr>\n
<\/td>\nfunction CrystalLineObject()<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nthis.group=null;<\/td>\n<\/tr>\n
<\/td>\nthis.path=null;<\/td>\n<\/tr>\n
<\/td>\nthis.oldData=[];<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nthis.init=function(id)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar arr=dataset[id];<\/td>\n<\/tr>\n
<\/td>\nthis.group=svg.append(“g”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar line = d3.svg.line()<\/td>\n<\/tr>\n
<\/td>\n.x(function(d,i){return xScale(i);})<\/td>\n<\/tr>\n
<\/td>\n.y(function(d){return yScale(d);});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u6298\u7ebf<\/td>\n<\/tr>\n
<\/td>\nthis.path=this.group.append(“path”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“d”,line(arr))<\/td>\n<\/tr>\n
<\/td>\n.style(“fill”,”none”)<\/td>\n<\/tr>\n
<\/td>\n.style(“stroke-width”,1)<\/td>\n<\/tr>\n
<\/td>\n.style(“stroke”,lineColor[id])<\/td>\n<\/tr>\n
<\/td>\n.style(“stroke-opacity”,0.9);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u7cfb\u5217\u7684\u5c0f\u5706\u70b9<\/td>\n<\/tr>\n
<\/td>\nthis.group.selectAll(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.data(arr)<\/td>\n<\/tr>\n
<\/td>\n.enter()<\/td>\n<\/tr>\n
<\/td>\n.append(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“cx”, function(d,i) {<\/td>\n<\/tr>\n
<\/td>\nreturn xScale(i);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.attr(“cy”, function(d) {<\/td>\n<\/tr>\n
<\/td>\nreturn yScale(d);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.attr(“cursor”,”pointer”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“r”,5)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,lineColor[id]);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nthis.group.selectAll(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.on(“mouseover”,function(d,i){<\/td>\n<\/tr>\n
<\/td>\nvar tx=parseFloat(d3.select(this).attr(“cx”));<\/td>\n<\/tr>\n
<\/td>\nvar ty=parseFloat(d3.select(this).attr(“cy”));<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar tips=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“id”,”tips”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar tipRect=tips.append(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,tx+10)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,ty+10)<\/td>\n<\/tr>\n
<\/td>\n.attr(“width”,120)<\/td>\n<\/tr>\n
<\/td>\n.attr(“height”,30)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,”#FFF”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“stroke-width”,1)<\/td>\n<\/tr>\n
<\/td>\n.attr(“stroke”,”#CCC”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar tipText=tips.append(“text”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”tiptools”)<\/td>\n<\/tr>\n
<\/td>\n.text(lineNames[id]+”\\r\\n”+xMarks[i]+”\\r\\n”+d)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,tx+20)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,ty+30);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.on(“mouseout”,function(d,i){<\/td>\n<\/tr>\n
<\/td>\nd3.select(“#tips”).remove();<\/td>\n<\/tr>\n
<\/td>\n});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nthis.oldData=arr;<\/td>\n<\/tr>\n
<\/td>\n};<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u52a8\u753b\u521d\u59cb\u5316\u65b9\u6cd5<\/td>\n<\/tr>\n
<\/td>\nthis.movieBegin=function(id)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar arr=dataset[i];<\/td>\n<\/tr>\n
<\/td>\n\/\/\u8865\u8db3\/\u5220\u9664\u8def\u5f84<\/td>\n<\/tr>\n
<\/td>\nvar olddata=this.oldData;<\/td>\n<\/tr>\n
<\/td>\nvar line= d3.svg.line()<\/td>\n<\/tr>\n
<\/td>\n.x(function(d,i){if(i>=olddata.length) return w-padding; else return xScale(i);})<\/td>\n<\/tr>\n
<\/td>\n.y(function(d,i){if(i>=olddata.length) return h-foot_height; else return yScale(olddata[i]);});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u8def\u5f84\u521d\u59cb\u5316<\/td>\n<\/tr>\n
<\/td>\nthis.path.attr(“d”,line(arr));<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u622a\u65ad\u65e7\u6570\u636e<\/td>\n<\/tr>\n
<\/td>\nvar tempData=olddata.slice(0,arr.length);<\/td>\n<\/tr>\n
<\/td>\nvar circle=this.group.selectAll(“circle”).data(tempData);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5220\u9664\u591a\u4f59\u7684\u5706\u70b9<\/td>\n<\/tr>\n
<\/td>\ncircle.exit().remove();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5706\u70b9\u521d\u59cb\u5316\uff0c\u6dfb\u52a0\u5706\u70b9,\u591a\u51fa\u6765\u7684\u5230\u53f3\u4fa7\u5e95\u90e8<\/td>\n<\/tr>\n
<\/td>\nthis.group.selectAll(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.data(arr)<\/td>\n<\/tr>\n
<\/td>\n.enter()<\/td>\n<\/tr>\n
<\/td>\n.append(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“cx”, function(d,i){<\/td>\n<\/tr>\n
<\/td>\nif(i>=olddata.length) return w-padding; else return xScale(i);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.attr(“cy”,function(d,i){<\/td>\n<\/tr>\n
<\/td>\nif(i>=olddata.length) return h-foot_height; else return yScale(d);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.attr(“r”,5)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,lineColor[id])<\/td>\n<\/tr>\n
<\/td>\n.attr(“cursor”,”pointer”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nthis.group.selectAll(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.on(“mouseover”,function(d,i){<\/td>\n<\/tr>\n
<\/td>\nvar tx=parseFloat(d3.select(this).attr(“cx”));<\/td>\n<\/tr>\n
<\/td>\nvar ty=parseFloat(d3.select(this).attr(“cy”));<\/td>\n<\/tr>\n
<\/td>\nvar tips=svg.append(“g”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“id”,”tips”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar tipRect=tips.append(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,tx+10)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,ty+10)<\/td>\n<\/tr>\n
<\/td>\n.attr(“width”,120)<\/td>\n<\/tr>\n
<\/td>\n.attr(“height”,30)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,”#FFF”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“stroke-width”,1)<\/td>\n<\/tr>\n
<\/td>\n.attr(“stroke”,”#CCC”);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar tipText=tips.append(“text”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”tiptools”)<\/td>\n<\/tr>\n
<\/td>\n.text(lineNames[id]+”\\r\\n”+xMarks[i]+”\\r\\n”+d)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”,tx+20)<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,ty+30);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.on(“mouseout”,function(d,i){<\/td>\n<\/tr>\n
<\/td>\nd3.select(“#tips”).remove();<\/td>\n<\/tr>\n
<\/td>\n});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nthis.oldData=arr;<\/td>\n<\/tr>\n
<\/td>\n};<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u91cd\u7ed8\u52a0\u52a8\u753b\u6548\u679c<\/td>\n<\/tr>\n
<\/td>\nthis.reDraw=function(id,_duration)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar arr=dataset[i];<\/td>\n<\/tr>\n
<\/td>\nvar line = d3.svg.line()<\/td>\n<\/tr>\n
<\/td>\n.x(function(d,i){return xScale(i);})<\/td>\n<\/tr>\n
<\/td>\n.y(function(d){return yScale(d);});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u8def\u5f84\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nthis.path.transition().duration(_duration).attr(“d”,line(arr));<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u5706\u70b9\u52a8\u753b<\/td>\n<\/tr>\n
<\/td>\nthis.group.selectAll(“circle”)<\/td>\n<\/tr>\n
<\/td>\n.transition()<\/td>\n<\/tr>\n
<\/td>\n.duration(_duration)<\/td>\n<\/tr>\n
<\/td>\n.attr(“cx”, function(d,i) {<\/td>\n<\/tr>\n
<\/td>\nreturn xScale(i);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n.attr(“cy”, function(d) {<\/td>\n<\/tr>\n
<\/td>\nreturn yScale(d);<\/td>\n<\/tr>\n
<\/td>\n})<\/td>\n<\/tr>\n
<\/td>\n};<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u4ece\u753b\u5e03\u5220\u9664\u6298\u7ebf<\/td>\n<\/tr>\n
<\/td>\nthis.remove=function()<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nthis.group.remove();<\/td>\n<\/tr>\n
<\/td>\n};<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u6dfb\u52a0\u56fe\u4f8b<\/td>\n<\/tr>\n
<\/td>\nfunction addLegend()<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar textGroup=legend.selectAll(“text”)<\/td>\n<\/tr>\n
<\/td>\n.data(lineNames);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\ntextGroup.exit().remove();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nlegend.selectAll(“text”)<\/td>\n<\/tr>\n
<\/td>\n.data(lineNames)<\/td>\n<\/tr>\n
<\/td>\n.enter()<\/td>\n<\/tr>\n
<\/td>\n.append(“text”)<\/td>\n<\/tr>\n
<\/td>\n.text(function(d){return d;})<\/td>\n<\/tr>\n
<\/td>\n.attr(“class”,”legend”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”, function(d,i) {return i*100;})<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,0)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,function(d,i){ return lineColor[i];});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nvar rectGroup=legend.selectAll(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.data(lineNames);<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nrectGroup.exit().remove();<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nlegend.selectAll(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.data(lineNames)<\/td>\n<\/tr>\n
<\/td>\n.enter()<\/td>\n<\/tr>\n
<\/td>\n.append(“rect”)<\/td>\n<\/tr>\n
<\/td>\n.attr(“x”, function(d,i) {return i*100-20;})<\/td>\n<\/tr>\n
<\/td>\n.attr(“y”,-10)<\/td>\n<\/tr>\n
<\/td>\n.attr(“width”,12)<\/td>\n<\/tr>\n
<\/td>\n.attr(“height”,12)<\/td>\n<\/tr>\n
<\/td>\n.attr(“fill”,function(d,i){ return lineColor[i];});<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nlegend.attr(“transform”,”translate(“+((w-lineNames.length*100)\/2)+”,”+(h-10)+”)”);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u4ea7\u751f\u968f\u673a\u6570\u636e<\/td>\n<\/tr>\n
<\/td>\nfunction getData()<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar lineNum=Math.round(Math.random()*10)%3+1;<\/td>\n<\/tr>\n
<\/td>\nvar dataNum=Math.round(Math.round(Math.random()*10))+5;<\/td>\n<\/tr>\n
<\/td>\noldData=dataset;<\/td>\n<\/tr>\n
<\/td>\ndataset=[];<\/td>\n<\/tr>\n
<\/td>\nxMarks=[];<\/td>\n<\/tr>\n
<\/td>\nlineNames=[];<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<dataNum;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nxMarks.push(“\u6807\u7b7e”+i);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<lineNum;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nvar tempArr=[];<\/td>\n<\/tr>\n
<\/td>\nfor(j=1;j<dataNum;j++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\ntempArr.push(Math.round(Math.random()*h));<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\ndataset.push(tempArr);<\/td>\n<\/tr>\n
<\/td>\nlineNames.push(“\u7cfb\u5217”+i);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/td>\n<\/tr>\n
<\/td>\n\/\/\u53d6\u5f97\u591a\u7ef4\u6570\u7ec4\u6700\u5927\u503c<\/td>\n<\/tr>\n
<\/td>\nfunction getMaxdata(arr)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nmaxdata=0;<\/td>\n<\/tr>\n
<\/td>\nfor(i=0;i<arr.length;i++)<\/td>\n<\/tr>\n
<\/td>\n{<\/td>\n<\/tr>\n
<\/td>\nmaxdata=d3.max([maxdata,d3.max(arr[i])]);<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\nreturn maxdata;<\/td>\n<\/tr>\n
<\/td>\n}<\/td>\n<\/tr>\n
<\/td>\n<\/script><\/span><\/td>\n<\/tr>\n
<\/td>\n<p align<\/span>=”left<\/span>“><\/span><\/td>\n<\/tr>\n
<\/td>\n<button onClick<\/span>=”javascript:drawChart();<\/span>“><\/span>\u5237\u65b0\u6570\u636e<\/button><\/span><\/td>\n<\/tr>\n
<\/td>\n<\/p><\/span><\/td>\n<\/tr>\n
<\/td>\n<\/body><\/span><\/td>\n<\/tr>\n
<\/td>\n<\/html><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n

 <\/p>\n

\uff0c\u6253\u5f00\u540e\u53f3\u952e\u67e5\u770b\u6e90\u7801\uff0c\u9f20\u6807\u79fb\u52a8\u5230\u5706\u70b9\u4e0a\uff0c\u53ef\u4ee5\u770b\u5230\u6570\u636e\u63d0\u793a\u6807\u7b7e\u3002<\/p>\n

\u5b9e\u73b0\u5411\u4e0b\u94bb\u53d6<\/p>\n

\u73b0\u5728\u56fe\u8868\u5df2\u7ecf\u5177\u6709\u4e00\u5b9a\u7684\u4ea4\u4e92\u6027\u4e86\uff0c\u6211\u4eec\u5e0c\u671b\u80fd\u591f\u5728\u70b9\u51fb\u5706\u70b9\u7684\u65f6\u5019\uff0c\u5bf9\u5185\u90e8\u6570\u636e\u6709\u4e00\u4e2a\u9009\u62e9\uff0c\u5e76\u5c06\u9009\u62e9\u7ed3\u679c\u53d1\u9001\u51fa\u6765\uff0c\u7c7b\u4f3c\u6c34\u6676\u6613\u8868\u7684\u3010\u5411\u4e0b\u94bb\u53d6\u3011\u529f\u80fd\u3002\u90a3\u4e48\u9996\u5148\u9700\u8981\u5b9a\u4e49\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u5f53\u7528\u6237\u70b9\u51fb\u9f20\u6807\uff0c\u4e8b\u4ef6\u88ab\u89e6\u53d1\uff0c\u5982\u679c\u6709\u53e6\u5916\u7684\u5bf9\u8c61\u4fa6\u542c\u5b83\uff0c\u5219\u5c06\u6570\u636e\u53d1\u9001\u51fa\u6765\u3002<\/p>\n

\n
\/\/\u5b9a\u4e49\u6298\u7ebf\u7684\u70b9\u51fb\u4e8b\u4ef6
\nvar listeners = {};\/\/\u5982\u679c\u6709\u4fa6\u542c\uff0c\u5219\u89e6\u53d1\u4e8b\u4ef6
\nvar fireEvent= function (eventName, eventProperties)
\n{
\nif (!listeners[eventName])
\nreturn;
\nfor (var i = 0; i < listeners[eventName].length; i++) {
\nlisteners[eventName][i](eventProperties);
\n}
\n};<\/p>\n

\/\/\u6ce8\u518c\u4fa6\u542c\u5230\u7c7b
\nthis.addListener= function (eventName, callback)
\n{
\nif (!listeners[eventName])
\nlisteners[eventName] = [];
\nlisteners[eventName].push(callback);
\n};<\/p>\n

\/\/\u4ece\u7c7b\u91cc\u9762\u79fb\u9664\u4fa6\u542c
\nthis.removeListener = function (eventName, callback)
\n{
\nif (!listeners[eventName])
\nreturn;
\nfor (var i = 0; i < listeners[eventName].length; i++) {
\nif (listeners[eventName][i] == callback) {
\ndelete listeners[eventName][i];
\nreturn;
\n}
\n}
\n};<\/p>\n<\/div>\n<\/div>\n

\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5728\u6298\u7ebf\u70b9\u51fb\u7684\u65f6\u5019\uff0c\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\u3002<\/p>\n

\n
\/\/\u5706\u70b9\u7684\u5176\u5b83\u4ee3\u7801
\n……
\n.on(“click”,function(d,i)
\n{
\nfireEvent(“click”,{lineName:lineNames[id],xMark:xMarks[i],value:d});
\n});<\/div>\n<\/div>\n

\u7136\u540e\u5728\u4e3b\u7a0b\u5e8f\u7684\u6dfb\u52a0\u6298\u7ebf\u91cc\u9762\u6ce8\u518c\u4fa6\u542c\uff0c\u770b\u770b\u7528\u6237\u70b9\u51fb\u7684\u5706\u70b9\u4fe1\u606f\uff0c\u8fd9\u91cc\u6211\u4eec\u7b80\u5355\u7684alert\u4e00\u4e0b\uff0c\u5982\u679c\u9700\u8981\u548c\u6298\u7ebf\u56fe\u5916\u90e8\u4ea4\u4e92\uff0c\u8fd8\u9700\u8981\u5c06\u6298\u7ebf\u56fe\u5305\u88c5\u4e00\u4e0b\uff0c\u505a\u6210\u4e00\u4e2a\u7c7b\uff0c\u7136\u540e\u4e3a\u5b83\u518d\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u5e76\u6ce8\u518c\u4fa6\u542c\u3002<\/p>\n

\n
\/\/\u6dfb\u52a0\u6298\u7ebf
\nlines=[];
\nfor(i=0;i<currentLineNum;i++)
\n{
\nvar newLine=new CrystalLineObject();
\nnewLine.init(i);
\n\/\/\u4fa6\u542c\u5706\u70b9\u70b9\u51fb\u4e8b\u4ef6
\nnewLine.addListener(“click”,function(msg){
\nalert(“\u7cfb\u5217\u540d\u79f0\uff1a”+msg.lineName+”\\r\\n\u6807\u7b7e\uff1a”+msg.xMark+”\\r\\n\u503c\uff1a”+msg.value);
\n});
\nlines.push(newLine);
\n}<\/div>\n<\/div>\n

\u5177\u4f53\u7684js\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u89e3\u91ca\uff0c\u7f51\u4e0a\u5f88\u591a\uff0c\u611f\u5174\u8da3\u7684\u8bdd\uff0c\u53ef\u4ee5\u6df1\u5165\u7814\u7a76\u4e00\u4e0b\uff0c\u73b0\u5728\u6211\u4eec\u7684\u6298\u7ebf\u56fe\u5982\u4e0b\u56fe\u6240\u793a\u3002<\/p>\n

\"8_2\"<\/a><\/p>\n

\u5bdf\u770b\u65b0\u7684\u52a8\u753b\u6f14\u793a\u6548\u679c\uff1ademo8_2.html\uff0c\u6253\u5f00\u540e\u53f3\u952e\u67e5\u770b\u6e90\u7801\uff0c\u70b9\u51fb\u3010\u5237\u65b0\u6570\u636e\u3011\u53ef\u4ee5\u770b\u5230\u65b0\u7684\u52a8\u753b\u6548\u679c\uff0c\u70b9\u51fb\u6298\u7ebf\u4e0a\u7684\u5706\u70b9\uff0c\u4f1a\u5f39\u51fa\u5bf9\u8bdd\u6846\uff0c\u8bf4\u660e\u7528\u6237\u5728\u6298\u7ebf\u7c7b\u4e0a\u70b9\u51fb\u7684\u4fe1\u606f\u3002<\/p>\n

 <\/p>\n

\u53c2\u8003\u7f51\u7ad9\u4e0e\u76f8\u5173\u6587\u6863\u8d44\u6599<\/b><\/p>\n

\n

D3.js\u7f51\u7ad9\uff1ahttp:\/\/d3js.org\/<\/p>\n

\u5b98\u65b9API\u8bf4\u660ehttps:\/\/github.com\/mbostock\/d3\/wiki\/API-Reference<\/p>\n

\u5b66\u4e60\u8d44\u6599:http:\/\/www.dashingd3js.com\/<\/p>\n

http:\/\/bost.ocks.org\/mike\/<\/p>\n

https:\/\/github.com\/mbostock\/d3\/wiki<\/p>\n

https:\/\/groups.google.com\/forum\/?fromgroups#!forum\/d3-js<\/p>\n

http:\/\/stackoverflow.com\/questions\/tagged\/d3.js<\/p>\n

https:\/\/github.com\/mbostock\/d3\/wiki\/Gallery<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

\u8981\u89e3\u51b3\u7684\u95ee\u9898 \u6211\u5f53\u521d\u4e3a\u4ec0\u4e48\u9009\u62e9D3.js\uff1f\u4e0d\u662f\u56e0\u4e3a\u5b83\u7684\u56fe\u50cf\u591a\u4e48\u7eda\u4e3d\uff0c\u90a3\u662f\u4f5c\u56fe\u8f6f\u4ef6\u7684\u57fa\u672c\u529f\u80fd\uff0c\u5982\u679c\u53ea\u662f\u4e3a\u4e86\u505a\u4e00\u4e9b…<\/p>\n","protected":false},"author":2,"featured_media":645,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38],"tags":[55,233],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/644"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":1,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":646,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/644\/revisions\/646"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/645"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}