2017-05-31 288 views
0

嘗試創建一個線圖,其中包含1000個值在10^-7至10^-9範圍內的線性圖,但是正在創建線圖,而不是在x軸上填滿它正在充滿斜邊。以奇妙的方式填充d3樣式填充

我認爲這個問題與數據有關,因爲在代碼中擬合一些其他值似乎很好。 這是小提琴:https://jsfiddle.net/43sz9e2d/1/

任何幫助嗎?

HTML文件:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <svg height=400 width=600></svg> 
    <title> 
    diff colour area chart 
    </title> 
    <script src="https://d3js.org/d3.v3.min.js"></script> 
    <script src="./diff_area_line_graph.js"></script> 
    <link rel="stylesheet" type="text/css" href="diff_area_line_graph.css"> 
</head> 
<body> 
</body> 
</html> 

js文件:

var data=[ 
    0.003098344217418779, 
    0.003050455340422816, 
    0.003003483230367491, 
    0.0029574879000276526, 
    0.002912526785452867, 
    0.0028686546791307594, 
    0.0028259236703412974, 
    0.0027843830926729696, 
    0.002744079478649364, 
    0.0027050565213931053, 
    0.0026673550432336377, 
    0.0026310129711459274, 
    0.002596065318888872, 
    0.00256254417569515, 
    0.00253047870134838, 
    0.0024998951274688534, 
    0.002470816764815812, 
    0.0024432640164022018, 
    0.0024172543962071363, 
    0.002392802553261877, 
    0.0023699203008770396, 
    0.002348616650771901, 
    0.0023288978518611132, 
    0.002310767433449818, 
    0.0022942262525850153, 
    0.0022792725453091183, 
    0.0022659019815607726, 
    0.0022541077234683004, 
    0.0022438804867823898, 
    0.0022352086051969397, 
    0.0022280780973101154, 
    0.002222472735981723, 
    0.0022183741198478295, 
    0.002215761746759102, 
    0.0022146130889155774, 
    0.0022149036694773536, 
    0.002216607140438076, 
    0.0022196953615558597, 
    0.0022241384801445128, 
    0.002229905011536446, 
    0.0022369619200374486, 
    0.0022452747002025143, 
    0.0022548074582710172, 
    0.0022655229936087897, 
    0.0022773828800138536, 
    0.0022903475467518186, 
    0.0023043763591960504, 
    0.002319427698956744, 
    0.0023354590433918533, 
    0.0023524270444014645, 
    0.002370287606415529, 
    0.0023889959634929995, 
    0.0024085067554581213, 
    0.0024287741030070823, 
    0.002449751681725264, 
    0.002471392794961985, 
    0.0024936504455158976, 
    0.002516477406090043, 
    0.002539826288480973, 
    0.002563649611471339, 
    0.002587899867399917, 
    0.0026125295873871248, 
    0.002637491405197819, 
    0.002662738119726399, 
    0.002688222756092124, 
    0.0027138986253349927, 
    0.002739719382704612, 
    0.002765639084536167, 
    0.002791612243708974, 
    0.0028175938836840714, 
    0.002843539591118028, 
    0.0028694055670505344, 
    0.002895148676663491, 
    0.0029207264976091863, 
    0.0029460973669048316, 
    0.002971220426390201, 
    0.0029960556667444293, 
    0.003020563970057162, 
    0.003044707150948344, 
    0.003068447996229814, 
    0.0030917503031008234, 
    0.003114578915868368, 
    0.0031368997611820855, 
    0.0031586798817722526, 
    0.003179887468678261, 
    0.0032004918919538382, 
    0.0032204637298342063, 
    0.003239774796349395, 
    0.003258398167367057, 
    0.0032763082050473505, 
    0.0032934805806918124, 
    0.0033098922959676476, 
    0.0033255217024885098, 
    0.003340348519732665, 
    0.003354353851279369, 
    0.003367520199344506, 
    0.0033798314775968052, 
    0.0033912730222365245, 
    0.003401831601319151, 
    0.0034114954223075965, 
    0.0034202541378374213, 
    0.003428098849680906, 
    0.003435022110897216, 
    0.003441017926157568, 
    0.003446081750236053, 
    0.0034502104846587996, 
    0.0034534024725062333, 
    0.003455657491365507, 
    0.0034569767444325604, 
    0.0034573628497658504, 
    0.0034568198276964343, 
    0.0034553530864018973, 
    0.003452969405654467, 
    0.0034496769187566563, 
    0.003445485092680776, 
    0.0034404047064317865, 
    0.0034344478276560875, 
    0.003427627787522027, 
    0.0034199591539011277, 
    0.0034114577028821827, 
    0.0034021403886536497, 
    0.0033920253117928983, 
    0.0033811316860040165, 
    0.0033694798033490304, 
    0.0033570909980203943, 
    0.003343987608705605, 
    0.0033301929395977096, 
    0.0033157312201082543, 
    0.0033006275633419685, 
    0.003284907923395031, 
    0.003268599051541288, 
    0.0032517284513731044, 
    0.0032343243329657624, 
    0.0032164155661363798, 
    0.0031980316328702376, 
    0.003179202578989168, 
    0.0031599589651382493, 
    0.0031403318171684814, 
    0.003120352575994384, 
    0.0031000530470065486, 
    0.003079465349120054, 
    0.003058621863540451, 
    0.0030375551823295047, 
    0.0030162980568533117, 
    0.00299488334619558, 
    0.0029733439656188855, 
    0.0029517128351565537, 
    0.002930022828417493, 
    0.002908306721685796, 
    0.002886597143396242, 
    0.002864926524066018, 
    0.0028433270467619477, 
    0.0028218305981813872, 
    0.002800468720423617, 
    0.0027792725635271114, 
    0.002758272838846489, 
    0.0027374997733411815, 
    0.0027169830648460214, 
    0.002696751838391975, 
    0.00267683460364311, 
    0.002657259213513734, 
    0.002638052824027268, 
    0.0026192418554760646, 
    0.002600851954938856, 
    0.002582907960209931, 
    0.0025654338651915354, 
    0.0025484527867981996, 
    0.002531986933418974, 
    0.0025160575749806876, 
    0.002500685014652473, 
    0.0024858885622288628, 
    0.0024716865092258185, 
    0.0024580961057210572, 
    0.002445133538967037, 
    0.0024328139138019176, 
    0.002421151234880811, 
    0.00241015839074656, 
    0.0023998471397562626, 
    0.0023902280978767175, 
    0.0023813107283589393, 
    0.0023731033332988856, 
    0.002365613047088544, 
    0.002358845831758557, 
    0.0023528064742106367, 
    0.002347498585335074, 
    0.002342924601005835, 
    0.002339085784942825, 
    0.002335982233428177, 
    0.0023336128818606094, 
    0.002331975513129236, 
    0.002331066767785519, 
    0.002330882155989485, 
    0.0023314160712037393, 
    0.0023326618056063353, 
    0.002334611567191121, 
    0.0023372564985217796, 
    0.002340586697103494, 
    0.002344591237333877, 
    0.0023492581939926435, 
    0.002354574667227345, 
    0.0023605268089904492, 
    0.002367099850881042, 
    0.0023742781333424947, 
    0.002382045136165614, 
    0.0023903835102449702, 
    0.002399275110534428, 
    0.0024087010301462298, 
    0.0024186416355364625, 
    0.0024290766027182027, 
    0.002439984954442278, 
    0.002451345098284227, 
    0.00246313486557478, 
    0.0024753315511100568, 
    0.0024879119535765443, 
    0.002500852416624961, 
    0.0025141288705261603, 
    0.0025277168743414375, 
    0.002541591658538823, 
    0.0025557281679863338, 
    0.0025701011052525684, 
    0.002584684974144581, 
    0.002599454123412588, 
    0.002614382790550791, 
    0.0026294451456234137, 
    0.002644615335044987, 
    0.0026598675252438963, 
    0.0026751759461383744, 
    0.002690514934354304, 
    0.002705858976114543, 
    0.0027211827497298914, 
    0.002736461167622379, 
    0.002751669417812187, 
    0.0027667830048002267, 
    0.0027817777897793114, 
    0.002796630030107783, 
    0.0028113164179805164, 
    0.002825814118233428, 
    0.00284010080521889, 
    0.002854154698690827, 
    0.0028679545986397973, 
    0.0028814799190199506, 
    0.0028947107203114546, 
    0.00290762774086383, 
    0.0029202124269675053, 
    0.002932446961602952, 
    0.002944314291818867, 
    0.0029557981546930673, 
    0.002966883101832087, 
    0.002977554522367839, 
    0.002987798664412222, 
    0.002997602654933067, 
    0.003006954518017523, 
    0.0030158431914916765, 
    0.0030242585418679894, 
    0.0030321913775950343, 
    0.0030396334605869157, 
    0.003046577516012762, 
    0.003053017240329711, 
    0.0030589473075459165, 
    0.0030643633737032225, 
    0.0030692620795723297, 
    0.003073641051556485, 
    0.003077498900802953, 
    0.0030808352205247648, 
    0.003083650581538514, 
    0.0030859465260272313, 
    0.003087725559540625, 
    0.003088991141248241, 
    0.0030897476724643484, 
    0.00309000048346656, 
    0.0030897558186334093, 
    0.0030890208199292534, 
    0.0030878035087680074, 
    0.003086112766290274, 
    0.00308395831209144, 
    0.0030813506814412993, 
    0.003078301201038607, 
    0.00307482196334681, 
    0.003070925799559912, 
    0.003066626251250093, 
    0.00306193754075122, 
    0.003056874540334877, 
    0.003051452740237845, 
    0.003045688215602231, 
    0.00303959759239154, 
    0.003033198, 
    0.0030265070970582294, 
    0.003019542911196428, 
    0.003, 
    0.0030048689761561016, 
    0.0029971972308540547, 
    0.0029893281446083807, 
    0.002981281422397817, 
    0.002973076978514842, 
    0.0029647348960968405, 
    0.002956275386431778, 
    0.0029477187481165715, 
    0.002939085326146572, 
    0.0029303954710147113, 
    0.002921669497898812, 
    0.0029129276460153493, 
    0.002904190038217599, 
    0.0028954766409155924, 
    0.0028868072243946174, 
    0.0028782013236081806, 
    0.0028696781995203703, 
    0.002861256801071437, 
    0.002852955727839109, 
    0.002844793193466776, 
    0.002836786989928071, 
    0.002828954452695733, 
    0.002821312426880729, 
    0.0028138772344057246, 
    0.002806664642274854, 
    0.00279968983199953, 
    0.0027929673702377484, 
    0.0027865111807018478, 
    0.00278033451738718, 
    0.002774449939171493, 
    0.002768869285832072, 
    0.002763603655524879, 
    0.0027586633837670127, 
    0.002754058023960808, 
    0.002749796329494864, 
    0.0027458862374541517, 
    0.0027423348539681665, 
    0.0027391484412228953, 
    0.0027363324061590636, 
    0.002733891290875829, 
    0.002731828764755773, 
    0.0027301476183236462, 
    0.002728849758847971, 
    0.00272793620769123, 
    0.002727407099410938, 
    0.0027272616826105743, 
    0.002727498322535928, 
    0.0027281145054090968, 
    0.0027291068444890263, 
    0.0027304710878442023, 
    0.002732202127819842, 
    0.002734294012178718, 
    0.0027367399568915935, 
    0.0027395323605501525, 
    0.0027426628203722336, 
    0.002746122149766255, 
    0.0027499003974187815, 
    0.002753986867866372, 
    0.0027583701435101478, 
    0.0027630381080288226, 
    0.0027679779711434383, 
    0.002773176294684579, 
    0.002778619019910483, 
    0.002784291496022268, 
    0.0027901785098203213, 
    0.002796264316443916, 
    0.002802532671134241, 
    0.002808966861959218, 
    0.0028155497434368794, 
    0.0028222637709925343, 
    0.0028290910361835793, 
    0.002836013302624529, 
    0.0028430120425437526, 
    0.0028500684739023764, 
    0.0028571635980049795, 
    0.002864278237530985, 
    0.002871393074915066, 
    0.0028784886910044397, 
    0.002885545603920618, 
    0.0028925443080530153, 
    0.0028994653131117565, 
    0.0029062891831671696, 
    0.0029129965756036326, 
    0.0029195682799158466, 
    0.002925985256276088, 
    0.002932228673801621, 
    0.0029382799484521994, 
    0.002944120780488481, 
    0.0029497331914231507, 
    0.002955099560397684, 
    0.0029602026599189115, 
    0.0029650256908908827, 
    0.0029695523168789956, 
    0.0029737666975448956, 
    0.0029776535211923335, 
    0.002981198036365907, 
    0.0029843860824464697, 
    0.0029872041191889393, 
    0.002989639255150236, 
    0.0029916792749572103, 
    0.0029933126653665797, 
    0.0029945286400711517, 
    0.0029953171632089125, 
    0.0029956689715339505, 
    0.002995575595210588, 
    0.0029950293771946112, 
    0.002994023491167968, 
    0.0029925519579959074, 
    0.0029906096606781203, 
    0.002988192357768058, 
    0.002985296695237306, 
    0.002981920216764506, 
    0.0029780613724310853, 
    0.002973719525808685, 
    0.002968894959425955, 
    0.0029635888786050577, 
    0.0029578034136609455, 
    0.0029515416204591817, 
    0.0029448074793307793, 
    0.002937605892345186, 
    0.002929942678945225, 
    0.002921824569950435, 
    0.0029132591999378415, 
    0.0029042550980118067, 
    0.0028948216769771173, 
    0.0028849692209320034, 
    0.002874708871300228, 
    0.002864052611323842, 
    0.002853013249040555, 
    0.002841604398772023, 
    0.0028298404611516235, 
    0.0028177366017225363, 
    0.002805308728139106, 
    0.002792573466006604, 
    0.002779548133396539, 
    0.0027662507140767093, 
    0.0027526998294970825, 
    0.0027389147095745136, 
    0.83, 
    0.0027107215423626315, 
    0.0026963547183957047, 
    0.0026818360396327757, 
    0.0026671873012871486, 
    0.002652430709150415, 
    0.002637588843316774, 
    0.002622684621109847, 
    0.0026077412592688956, 
    0.002592782235452561, 
    0.0025778312491193645, 
    0.002562912181845268, 
    0.002548049057139587, 
    0.0025332659998214503, 
    0.002518587195019855, 
    0.002504036846861113, 
    0.0024896391369082023, 
    0.0024754181824171275, 
    0.0024613979944759466, 
    0.0024476024360925983, 
    0.002434055180298022, 
    0.002420779668331397, 
    0.002407799067974553, 
    0.27415, 
    0.002382813657519039, 
    0.002370853444139644, 
    0.0023592772545972113, 
    0.002348106274329219, 
    0.0023373611722180615, 
    0.002327062061849238, 
    0.0023172284634535457, 
    0.002307879266598657, 
    0.0022990326936948445, 
    0.002290706264378887, 
    0.0022829167608393874, 
    0.002275680194145832, 
    0.0022690117716426894, 
    0.002262925865468783, 
    0.002257435982260932, 
    0.0022525547340995697, 
    0.002248293810752641, 
    0.0022446639532725542, 
    0.0022416749289993695, 
    0.0022393355080216645, 
    0.002237653441144706, 
    0.0022366354394136086, 
    0.002236287155237142, 
    0.0022366131651556775, 
    0.002237616954294524, 
    0.0022393009025415615, 
    0.00224166627248557, 
    0.0022447131991491388, 
    0.0022484406815473272, 
    0.0022528465761005095, 
    0.0022579275919269288, 
    0.002263679288037568, 
    0.0022700960724528377, 
    0.0022771712032574644, 
    0.002284896791606713, 
    0.002293263806693765, 
    0.0023022620826846653, 
    0.0023118803276238145, 
    0.0023221061343093935, 
    0.002332925993134573, 
    0.0023443253068866523, 
    0.0023562884074926045, 
    0.00236879857469575, 
    0.002381838056644492, 
    0.002395388092370261, 
    0.0024094289361279828, 
    0.002423939883568537, 
    0.002438899299708875, 
    0.0024542846486615933, 
    0.0024700725250819903, 
    0.002486238687286821, 
    0.0025027580919952503, 
    0.0025196049306387743, 
    0.0025367526671832784, 
    0.0025541740774027858, 
    0.0025718412895410084, 
    0.0025897258262933725, 
    0.002607798648038891, 
    0.0026260301972480995, 
    0.002644390443990151, 
    0.0026628489324592814, 
    0.0026813748284380116, 
    0.002699936967611842, 
    0.0027185039046477254, 
    0.0027370439629462416, 
    0.0027555252849753432, 
    0.002773915883091539, 
    0.002792183690752697, 
    0.002810296614025081, 
    0.002828222583285942, 
    0.0028459296050218656, 
    0.0028633858136222477, 
    0.0028805595230665944, 
    0.0028974192784039805, 
    0.002913933906922825, 
    0.002930072568909263, 
    0.0029458048078927182, 
    0.0029611006002778746, 
    0.002975930404263128, 
    0.002990265207946673, 
    0.0030040765765227523, 
    0.003017336698472204, 
    0.0030300184306533287, 
    0.0030420953422011705, 
    0.0030535417571457037, 
    0.0030643327956619924, 
    0.003074444413868231, 
    0.003083853442090627, 
    0.003092537621517395, 
    0.003100475639167593, 
    0.0031076471611042726, 
    0.003114032863825285, 
    0.0031196144637691916, 
    0.0031243747448779766, 
    0.003128297584162696, 
    0.003131367975222744, 
    0.0031335720496741943, 
    0.003134897096447437, 
    0.0031353315789193503, 
    0.0031348651498502634, 
    0.0031334886641011007, 
    0.003131194189111326, 
    0.0031279750131235212, 
    0.0031238256511457534, 
    0.0031187418486481977, 
    0.0031127205829957734, 
    0.0031057600626239047, 
    0.0030978597239697484, 
    0.0030890202261765207, 
    0.0030792434435936975, 
    0.003068532456100999, 
    0.003056891537289069, 
    0.0030443261405346997, 
    0.0030308428830132287, 
    0.0030164495276954113, 
    0.0030011549633805995, 
    0.0029849691828223992, 
    0.002967903259007178, 
    0.00294996931964981, 
    0.002931180519974819, 
    0.002911551013854725, 
    0.0028910959233807427, 
    0.0028698313069441712, 
    0.00284777412590973, 
    0.002824942209964758, 
    0.0028013542212306725, 
    0.002777029617225223, 
    0.0027519886127660097, 
    0.0027262521409074252, 
    0.0026998418130045115, 
    0.0026727798779984163, 
    0.002645089181018924, 
    0.002616793121400189, 
    0.002587915610206046, 
    0.002558481027361389, 
    0.0025285141784858367, 
    0.0024980402515254797, 
    0.0024670847732777275, 
    0.002435673565903302, 
    0.002403832703518221, 
    0.0023715884689570928, 
    0.002338967310797382, 
    0.002305995800732357, 
    0.0022727005913783047, 
    0.0022391083745992336, 
    0.0022052458404297546, 
    0.0021711396366740983, 
    0.0021368163292563268, 
    0.002102302363393732, 
    0.0020676240256622055, 
    0.0020328074070189955, 
    0.0019978783668448143, 
    0.0019628624980636495, 
    0.0019277850933949448, 
    0.0018926711127890533, 
    0.0018575451520929953, 
    0.001822431412989666, 
    0.001787353674249656, 
    0.0017523352643308858, 
    0.001717399035357215, 
    0.0016825673385031936, 
    0.0016478620008080916, 
    0.0016133043034383533, 
    0.0015789149614136584, 
    0.0015447141048078367, 
    0.001510721261432017, 
    0.0014769553410035846, 
    0.0014434346208007703, 
    0.0014101767327990575, 
    0.0013771986522820333, 
    0.001344516687915844, 
    0.001312146473273079, 
    0.0012801029597886862, 
    0.0012484004111274084, 
    0.001217052398939277, 
    0.0011860717999768674, 
    0.001155470794545331, 
    0.0011252608662536982, 
    0.0010954528030335544, 
    0.0010660566993889698, 
    0.0010370819598395072, 
    0.0010085373035162175, 
    0.0009804307698688059, 
    0.0009527697254405704, 
    0.0009255608716663081, 
    0.000898810253647143, 
    0.000872523269855144, 
    0.0008467046827196909, 
    0.0008213586300467857, 
    0.0007964886372219154, 
    0.0007720976301466246, 
    0.0007481879488586713, 
    0.0007247613617855031, 
    0.0007018190805807927, 
    0.0006793617754939159, 
    0.0006573895912225442, 
    0.0006359021631989311, 
    0.0006148986342610066, 
    0.000594377671660056, 
    0.0005743374843575293, 
    0.0005547758405643951, 
    0.0005356900854774439, 
    0.0005170771591680111, 
    0.0004989336145797466, 
    0.0004812556355933119, 
    0.0004640390551171868, 
    0.00044727937316516454, 
    0.00043097177488255064, 
    0.0004151111484845867, 
    0.0003996921030721595, 
    0.0003847089862914561, 
    0.0003701559018058338, 
    0.0003560267265498415, 
    0.0003423151277369866, 
    0.00032901457959454215, 
    0.0003161183798003851, 
    0.00030361966559855867, 
    0.0002915114295719546, 
    0.00027978653505221257, 
    0.0002684377311486095, 
    0.00025745766737939025, 
    0.00024683890789063006, 
    0.00023657394524934618, 
    0.00022665521379916888, 
    0.0002170751025684402, 
    0.00020782596772213146, 
    0.00019890014455045983, 
    0.00019028995898851496, 
    0.00018198773866261384, 
    0.0001739858234604366, 
    0.00016627657562330424, 
    0.00015885238936019796, 
    0.00015170569998431124, 
    0.00014482899257406735, 
    0.00013821481016160816, 
    0.00013185576145279, 
    0.00012574452808368454, 
    0.00011987387141949035, 
    0.00011423663890261295, 
    0.00010882576995745931, 
    0.00010363430146022826, 
    0.00009865537278265362, 
    0.0000938822304192749, 
    0.00008930823220837494, 
    0.00008492685115722855, 
    0.00008073167888276199, 
    0.00007671642867912283, 
    0.0000728749382240056, 
    0.00006920117193588204, 
    0.00006568922299452901, 
    0.00006233331503745405, 
    0.000059127803544973336, 
    0.00005606717692681184, 
    0.00005314605732316719, 
    0.00005035920113321183, 
    0.00004770149928400165, 
    0.00004516797725271938, 
    0.00004275379485510474, 
    0.000040454245812817735, 
    0.00003826475711234397, 
    0.00003618088816788652, 
    0.000034198329800499275, 
    0.000032312903045501934, 
    0.00003052055779998092, 
    0.000028817371321925253, 
    0.000027199546592272164, 
    0.000025663410550846423, 
    0.0000242054122168745, 
    0.000022822120704435795, 
    0.000021510223142886566, 
    0.0000202665225119536, 
    0.000019087935400850824, 
    0.000017971489700419525, 
    0.00001691432223693785, 
    0.000015913676355885315, 
    0.00001496689946358681, 
    0.000014071440534298036, 
    0.000013224847589933063, 
    0.00001242476515927355, 
    0.000011668931723141874, 
    0.00001095517715166556, 
    0.000010281420139410831, 
    0.000009645665643817674, 
    0.000009046002332030452, 
    0.000008480600040885558, 
    0.000007947707254492636, 
    0.000007445648603528832, 
    0.000006972822390056683, 
    0.0000065276981413762005, 
    0.000006108814196130724, 
    0.0000057147753256048544, 
    0.000005344250392881082, 
    0.000004995970052259864, 
    0.00000466872449109659, 
    0.000004361361215967564, 
    0.000004072782884846042, 
    0.000003801945186749203, 
    0.0000035478547701065, 
    0.0000033095672209003674, 
    0.0000030861850914407824, 
    0.000002876855980455913, 
    0.0000026807706650120995, 
    0.0000024971612846172263, 
    0.000002325299577712047, 
    0.000002164495170614263, 
    0.000002014093918849715, 
    0.0000018734763006834577, 
    0.0000017420558625511952, 
    0.0000016192777159874831, 
    0.0000015046170855515019, 
    0.0000013975779071637363, 
    0.0000012976914761869784, 
    0.0000012045151445127484, 
    0.0000011176310658490104, 
    0.000001036644988346693, 
    9.611850936506414e-7, 
    8.909008814150599e-7, 
    8.254620982837993e-7, 
    7.645577103017318e-7, 
    7.078949176947379e-7, 
    6.551982109320449e-7, 
    6.062084669656222e-7, 
    5.606820845267709e-7, 
    5.183901573495406e-7, 
    4.791176841840743e-7, 
    4.4266281445997517e-7, 
    4.0883612846017943e-7, 
    3.7745995086925334e-7, 
    3.4836769656637604e-7, 
    3.214032475421487e-7, 
    2.964203598296991e-7, 
    2.7328209935401775e-7, 
    2.5186030561888767e-7, 
    2.3203508216795955e-7, 
    2.13694312775296e-7, 
    1.9673320234085994e-7, 
    1.8105384148778802e-7, 
    1.6656479388074467e-7, 
    1.5318070530797074e-7, 
    1.4082193359376209e-7, 
    1.294141984328421e-7, 
    1.1888825026331956e-7, 
    1.091795573205541e-7, 
    1.0022801004014188e-7, 
    9.197764200429834e-8, 
    8.43763666520672e-8, 
    7.73757289999229e-8, 
    7.093067164538312e-8, 
    6.499931435214384e-8, 
    5.954274654091494e-8, 
    5.452483203551138e-8 
] 
var svg=d3.select("svg"); 
// line_x={"20":"red","50":"green"} 
var margin={top:100,bottom:50,left:100,right:0}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

x_extent=d3.extent(data,function(d,i){return i}) 
y_extent=d3.extent(data,function(d,i){return d}) 

var x= d3.scale.linear() 
.range([0,width]) 
.domain(x_extent) 

var y=d3.scale.linear() 
.range([height,0]) 
.domain(y_extent) 

var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis().scale(y) 
     .orient("left"); 

// var vertical_line=d3.svg.line() 
// .x(function(d){return d.x}) 
// .y(function(d){return d.y}) 

var line=d3.svg.line() 
.x(function(d,i){ return x(i)}) 
.y(function(d,i){return y(d)}) 

var lg = svg.append("defs").append("linearGradient") 
.attr("id", "mygrad")//id of the gradient 
.attr("x1", "0%") 
.attr("x2", "100%") 
// .attr("x3","50%") 
// .attr("x4","75%") 
.attr("y1", "0%") 
.attr("y2", "0%")//since its a vertical linear gradient 
; 
lg.append("stop") 
.attr("offset", "0%") 
.style("stop-color", "red")//end in red 
.style("stop-opacity", 1) 

lg.append("stop") 
.attr("offset", "25%") 
.style("stop-color", "white")//start in blue 
.style("stop-opacity", 1) 
// .style("stroke-dasharray", ("3, 3")) 

lg.append("stop") 
.attr("offset", "75%") 
.style("stop-color", "white")//start in blue 
.style("stop-opacity", 1) 
.style("stroke-dasharray", ("2, 10")) 

lg.append("stop") 
.attr("offset", "100%") 
.style("stop-color", "red")//start in blue 
.style("stop-opacity", 1) 


g.append("path") 
.attr("class","line") 
.datum(data) 
.attr("d",line) 
.style('stroke', 'blue') 
// .style("fill", "url(#mygrad)") 


// var lowerLimit = d3.quantile(data, 0.18, function(d) { 
//  return d.x 
// }); 
// 
// svg.append('line') 
//  .attr('x1', x(lowerLimit)+margin.left) 
//  .attr('y1', height-margin.top) 
//  .attr('x2', margin.left+x(lowerLimit)) 
//  .attr('y2', height+margin.top) 
//  .style('stroke', 'brown') 
// 
// 
svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate("+margin.left+"," + (height+margin.top) + ")") 
    .call(xAxis); 
// Add the Y Axis 
svg.append("g") 
    .attr("class", "y axis") 
    .attr("transform", "translate("+margin.left+ ","+margin.top+")") 
    .call(yAxis); 
+0

你想一個折線圖或面積圖? –

回答

2

你想要一個面積圖。這些更改很簡單,只要告訴d3關閉沿軸的路徑,就可以爲填充添加顏色。

https://jsfiddle.net/guanzo/43sz9e2d/2/

var area = d3.svg.area() 
    .x(function(d,i){ return x(i)}) 
    .y0(height) 
    .y1(function(d,i){return y(d)}) 
+0

刪除我的答案,這是做到這一點的正確方法。 –