D3.js - Arbeiten mit größeren und kleineren Rasterlinien

Question

Ich versuche, Haupt- und Nebenrasterlinien in meinem Diagramm zu erhalten, aber habe ein sehr seltsames Problem laufe ...

Mein Ansatz ist das gleiche wie in diesem bl.ock - http://bl.ocks.org/mbostock/4349486. Verwenden Sie zwei Achseninstanzen, eine für die Ticks mit Beschriftungen und eine für das Raster. Stellen Sie die Rasterachse so ein, dass sie doppelt so viele Ticks wie die markierte Achse aufweist, und verwenden Sie die Exit-Auswahl des Datenjoins, um die untergeordneten Rasterlinien zu formatieren. Dies sollte Ihnen eine kleine Rasterlinie zwischen jedem Dur geben.

Das Problem ist, mein Code produziert ein Diagramm mit zu vielen der Gitternetzlinien als Moll. Aber, wenn Sie die y-Domäne ändern, um [-1, 1] anstelle des Umfangs der Daten zu sein (Linie 112: https://jsfiddle.net/z3r8ewmL/2/), funktioniert es ganz gut.

Jede Hilfe, die dies beheben würde sehr geschätzt werden!

function AreaPlot(width, height) { 
 

 
    // Scoping 
 
    var self = this; 
 

 

 
    // Plotting variables 
 
    this.margin = { 
 
    top: 20, 
 
    right: 20, 
 
    bottom: 30, 
 
    left: 50 
 
    }; 
 

 
    this.animation_duration = 250; 
 
    this.width = width - this.margin.left - this.margin.right; 
 
    this.height = height - this.margin.top - this.margin.bottom; 
 

 
    // Plotting functions 
 
    this.build_x_axis = function() { 
 

 
    // Create the function that maps from data space to display space 
 
    self.x = d3.scale.linear().range([0, self.width]); 
 

 
    // Create the axis function 
 
    self.x_axis = d3.svg.axis() 
 
     .ticks(10) 
 
     .scale(self.x) 
 
     .orient('bottom'); 
 

 
    // Add the axis 
 
    self.x_axis_g = self.svg.append('g') 
 
     .attr('class', 'x axis') 
 
     .attr('transform', 'translate(0,' + self.height + ')') 
 
     .call(self.x_axis); 
 

 
    // Create the grid function 
 
    self.x_grid = d3.svg.axis() 
 
     .ticks(20) 
 
     .scale(self.x) 
 
     .orient('bottom') 
 
     .tickSize(-self.height); 
 

 
    // Add the grid 
 
    self.x_grid_g = self.svg.append('g') 
 
     .attr('class', 'x grid') 
 
     .attr('transform', 'translate(0,' + self.height + ')') 
 
     .call(self.x_grid); 
 

 
    // Style the grid 
 
    self.style_x_grid(self.x_grid_g); 
 

 
    }; 
 

 
    this.build_y_axis = function() { 
 

 
    // Create the function that maps from data space to display space 
 
    self.y = d3.scale.linear().range([self.height, 0]); 
 

 
    // Create the axis function 
 
    self.y_axis = d3.svg.axis() 
 
     .ticks(10) 
 
     .scale(self.y) 
 
     .orient('left'); 
 

 
    // Add the axis 
 
    self.y_axis_g = self.svg.append('g') 
 
     .attr('class', 'y axis') 
 
     .call(self.y_axis); 
 

 
    // Create the grid function 
 
    self.y_grid = d3.svg.axis() 
 
     .ticks(20) 
 
     .scale(self.y) 
 
     .orient('left') 
 
     .tickSize(-self.width); 
 

 
    // Add the grid 
 
    self.y_grid_g = self.svg.append('g') 
 
     .attr('class', 'y grid') 
 
     .call(self.y_grid); 
 

 
    // Style the grid 
 
    self.style_y_grid(self.y_grid_g); 
 

 

 
    }; 
 

 
    this.domain_value = function(data_point, index) { 
 

 
    return self.x(index + 1); 
 

 
    }; 
 

 
    this.defined = function(data_point) { 
 

 
    return data_point; 
 

 
    }; 
 

 
    this.range_value = function(data_point, index) { 
 

 
    return self.y(data_point); 
 

 
    }; 
 

 
    this.set_data = function(data) { 
 

 
    // Update data extents 
 
    self.x.domain([0, data.length]); 
 
    self.y.domain(d3.extent(data)); 
 
    // self.y.domain([-1, 1]); \t // The plot works just fine with this domain... 
 

 
    // Update line 
 
    self.update_line(data); 
 

 
    // Update axes 
 
    self.update_axes(); 
 

 
    }; 
 

 
    this.style_x_grid = function(g) { 
 

 
    g.selectAll('.tick') 
 
     .data(self.x.ticks(10), function(d) { 
 
     return d; 
 
     }) 
 
     .exit() 
 
     .classed('minor', true); 
 

 
    }; 
 

 
    this.style_y_grid = function(g) { 
 

 
    g.selectAll('.tick') 
 
     .data(self.y.ticks(10), function(d) { 
 
     return d; 
 
     }) 
 
     .exit() 
 
     .classed('minor', true); 
 

 
    }; 
 

 
    this.update_axes = function() { 
 

 
    self.x_axis_g 
 
     .transition().duration(self.animation_duration) 
 
     .call(self.x_axis); 
 
    self.y_axis_g 
 
     .transition().duration(self.animation_duration) 
 
     .call(self.y_axis); 
 

 
    self.x_grid_g.transition() 
 
     .duration(self.animation_duration) 
 
     .call(self.x_grid); 
 
    self.y_grid_g.transition() 
 
     .duration(self.animation_duration) 
 
     .call(self.y_grid); 
 

 
    self.style_x_grid(self.x_grid_g); 
 
    self.style_y_grid(self.y_grid_g); 
 

 
    }; 
 

 
    this.update_line = function(data) { 
 

 
    var plot = self.svg.selectAll('.line') 
 
     .data([data]); 
 

 
    // Add elements when new data is present 
 
    plot.enter().append('path') 
 
     .attr('class', 'line'); 
 

 
    // Set the data attribute 
 
    plot.transition().duration(self.animation_duration) 
 
     .attr('d', self.line); 
 

 
    // Remove elements when data has been removed 
 
    plot.exit().remove(); 
 

 
    }; 
 

 
    // Create the plot 
 
    this.line = d3.svg.line() 
 
    .defined(self.defined) 
 
    .x(self.domain_value) 
 
    .y(self.range_value); 
 

 
    // Add the plot 
 
    this.svg = d3.select('.plotting-area').append('svg') 
 
    .attr('width', width) 
 
    .attr('height', height) 
 
    .append('g') 
 
    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); 
 

 
    // Build axes 
 
    self.build_x_axis(); 
 
    self.build_y_axis(); 
 

 
} 
 

 
var plot = new AreaPlot(800, 300); 
 
plot.set_data([0.000001123356355492433, 0.0000016456004914289224, 0.00000365318737749476, 0.0000071284475779975764, 0.000011114293556602206, 0.000014993948752817232, 0.000018926746633951552, 0.00002390438567090314, 0.00003108202508883551, 0.000042029936594190076, 0.00005996139589115046, 0.00009308228618465364, 0.00015851244097575545, 0.00028807029593735933, 0.0005318910698406398, 0.0009597145835869014, 0.001658284803852439, 0.0027245471719652414, 0.004255148582160473, 0.006331713404506445, 0.009006175212562084, 0.012286805547773838, 0.01612810604274273, 0.02042604796588421, 0.025018742308020592, 0.02969328686594963, 0.03419889882206917, 0.038262657821178436, 0.04160662367939949, 0.04396504908800125, 0.04509869962930679, 0.04480859637260437, 0.042953010648489, 0.03945915400981903, 0.034325819462537766, 0.027618922293186188, 0.01946265622973442, 0.01002695132046938, -0.00048646843060851097, -0.011857914738357067, -0.023864813148975372, -0.03629292547702789, -0.04894426092505455, -0.06164303421974182, -0.07423866540193558, -0.08660601079463959, -0.09864328056573868, -0.11026866734027863, -0.12141597270965576, -0.13202965259552002, -0.1420600861310959, -0.1514589935541153, -0.1601753830909729, -0.16815230250358582, -0.17532429099082947, -0.18161560595035553, -0.18693871796131134, -0.19119326770305634, -0.19426564872264862, -0.19602838158607483, -0.19633722305297852, -0.1950329691171646, -0.1919592171907425, -0.18697473406791687, -0.17996013164520264, -0.17082466185092926, -0.15951387584209442, -0.1460162252187729, -0.13036656379699707, -0.11264725774526596, -0.09298709034919739, -0.07155791670084, -0.04856905713677406, -0.024260029196739197, 0.0011074095964431763, 0.027257222682237625, 0.053907610476017, 0.0807817280292511, 0.10760942101478577, 0.134135439991951, 0.16012170910835266, 0.1853480488061905, 0.20961420238018036, 0.23273740708827972, 0.2545509934425354, 0.2749021053314209, 0.29364922642707825, 0.3106593191623688, 0.32580533623695374, 0.3389641344547272, 0.3500145971775055, 0.3588365614414215, 0.36531007289886475, 0.36931514739990234, 0.3707317113876343, 0.3694346249103546, 0.3653166890144348, 0.35832133889198303, 0.3484494388103485, 0.3357595205307007, 0.320365846157074, 0.3024330735206604, 0.2821681499481201, 0.25981035828590393, 0.23561909794807434, 0.20986413955688477, 0.18281608819961548, 0.154735267162323, 0.12586426734924316, 0.09642627090215683, 0.06662261486053467, 0.036625660955905914, 0.0065885791555047035, -0.0233587808907032, -0.05309954658150673, -0.08253124356269836, -0.11156108230352402, -0.14010168612003326, -0.16806744039058685, -0.19537143409252167, -0.22192302346229553, -0.24762584269046783, -0.2723766267299652, -0.2960638403892517, -0.3185672461986542, -0.3397608697414398, -0.35950949788093567, -0.3776701092720032, -0.3940924406051636, -0.4086195230484009, -0.4210880994796753, -0.43132835626602173, -0.43916499614715576, -0.444417268037796, -0.4468980133533478, -0.446403831243515, -0.44274887442588806, -0.435820609331131, -0.42559346556663513, -0.41213077306747437, -0.39557990431785583, -0.37616103887557983, -0.35415124893188477, -0.32986560463905334, -0.3036372661590576, -0.2757995128631592, -0.24667039513587952, -0.21653911471366882, -0.1856570541858673, -0.1542341560125351, -0.12243901193141937, -0.09040120989084244, -0.058218248188495636, -0.02596207521855831, 0.006313909776508808, 0.03856449946761131, 0.07074491679668427, 0.10280267894268036, 0.13467101752758026, 0.16626420617103577, 0.1974746584892273, 0.22817173600196838, 0.25820192694664, 0.2873901128768921, 0.31554239988327026, 0.3424549102783203, 0.3679123520851135, 0.39169514179229736, 0.41358453035354614, 0.43336719274520874, 0.45083943009376526, 0.4658105671405792, 0.47810590267181396, 0.48756924271583557, 0.4940623342990875, 0.497466117143631, 0.4976797103881836, 0.4946165978908539, 0.4882490932941437, 0.478625625371933, 0.4658651053905487, 0.4501465857028961, 0.43169716000556946, 0.4107765853404999, 0.3876623511314392, 0.3626370429992676, 0.3359777629375458, 0.3079444468021393, 0.27877140045166016, 0.2486637979745865, 0.21780261397361755, 0.1863427460193634, 0.15441100299358368, 0.12211302667856216, 0.0895407497882843, 0.0567743256688118, 0.023883726447820663, -0.009063121862709522, -0.04199391230940819, -0.07483386993408203, -0.10750450938940048, -0.13991646468639374, -0.17197084426879883, -0.2035597264766693, -0.2345665544271469, -0.26486700773239136, -0.2943294048309326, -0.3228157162666321, -0.3501870632171631, -0.3762997090816498, -0.4010072350502014, -0.4241616129875183, -0.44561341404914856, -0.46521177887916565, -0.4828042984008789, -0.4982355833053589, -0.5113463997840881, -0.5219724178314209, -0.5299420952796936, -0.5350740551948547, -0.537172257900238, -0.5360098481178284, -0.5313860177993774, -0.5231779217720032, -0.5113512277603149, -0.4959602952003479, -0.47714266180992126, -0.4551066756248474, -0.43011534214019775, -0.40246710181236267, -0.3724800944328308, -0.34047189354896545, -0.3067466616630554, -0.2715858817100525, -0.2352415770292282, -0.19793124496936798, -0.15983843803405762, -0.12111887335777283, -0.08190887421369553, -0.04232468828558922, -0.002473345957696438, 0.037540458142757416, 0.0776071846485138, 0.1176062598824501, 0.1574, 0.1968364417552948, 0.2357352077960968, 0.2738995850086212, 0.3111116290092468, 0.34713315963745117, 0.3817175328731537, 0.41460666060447693, 0.4455369710922241, 0.4742451310157776, 0.5004726648330688, 0.5239704251289368, 0.5445020794868469, 0.5618473887443542, 0.5758042335510254, 0.586190402507782, 0.5928428769111633, 0.5956186652183533, 0.5943847894668579, 0.5890411734580994, 0.579584538936615, 0.5661150813102722, 0.5488259792327881, 0.5279880166053772, 0.5039304494857788, 0.4770186245441437, 0.44763463735580444, 0.41615986824035645, 0.3829595148563385, 0.348360538482666, 0.3126607835292816, 0.27611804008483887, 0.23894856870174408, 0.2013375610113144, 0.16342484951019287, 0.12533260881900787, 0.0871630534529686, 0.04899772256612778, 0.010911346413195133, -0.02702312171459198, -0.06473106890916824, -0.10213523358106613, -0.13914932310581207, -0.17567786574363708, -0.211615651845932, -0.24684767425060272, -0.2812497019767761, -0.3146892786026001, -0.3470252454280853, -0.37811198830604553, -0.407800555229187, -0.43593645095825195, -0.4623616933822632, -0.48691514134407043, -0.5094323754310608, -0.5297453999519348, -0.5476809144020081, -0.5630595088005066, -0.5756938457489014, -0.5853861570358276, -0.5919250249862671, -0.5950804948806763, -0.5945811867713928, -0.5901708602905273, -0.5816890001296997, -0.5690886974334717, -0.5524381399154663, -0.5319123864173889, -0.507776141166687, -0.4803611934185028, -0.4500406086444855, -0.4172038435935974, -0.382235586643219, -0.34549713134765625, -0.30731427669525146, -0.2679688334465027, -0.22770027816295624, -0.18669624626636505, -0.14511653780937195, -0.10308924317359924, -0.06072032451629639, -0.01810367777943611, 0.024667702615261078, 0.06749458611011505, 0.1102636530995369, 0.1528417319059372, 0.19507218897342682, 0.2367730289697647, 0.2777369022369385, 0.3177328109741211, 0.35650634765625, 0.3937927782535553, 0.4293144643306732, 0.46278759837150574, 0.4939286410808563, 0.5224599242210388, 0.5481139421463013, 0.570638120174408, 0.5897977352142334, 0.6053783297538757, 0.6171870827674866, 0.6250532865524292, 0.628827691078186, 0.6283743977546692, 0.6235799193382263, 0.6144271492958069, 0.6010120511054993, 0.5835336446762085, 0.5622765421867371, 0.537590742111206, 0.5098663568496704, 0.47951263189315796, 0.4469384551048279, 0.4125331938266754, 0.3766525387763977, 0.3396112620830536, 0.30168434977531433, 0.2631017565727234, 0.22405900061130524, 0.18470248579978943, 0.1451607644557953, 0.10553813725709915, 0.06591808050870895, 0.02637604810297489, -0.01301523670554161, -0.0521814338862896, -0.09104548394680023, -0.1295214295387268, -0.1675138920545578, -0.20491750538349152, -0.2416168600320816, -0.2774871289730072, -0.3123950958251953, -0.34619879722595215, -0.3787517845630646, -0.40990427136421204, -0.43950122594833374, -0.4673842191696167, -0.4933919906616211, -0.5173600316047668, -0.5391202569007874, -0.558499813079834, -0.5753192901611328, -0.5893915295600891, -0.6005186438560486, -0.6084887981414795, -0.613072395324707, -0.6140021681785583, -0.6109884977340698, -0.6038209795951843, -0.5924047827720642, -0.5767669081687927, -0.5570509433746338, -0.533501923084259, -0.5064438581466675, -0.4762532711029053, -0.44333186745643616, -0.40808290243148804, -0.37089109420776367, -0.75141429901, -0.2920394539833069, -0.2509482502937317, -0.2090442031621933, -0.1665026992559433, -0.12346445769071579, -0.0800449326634407, -0.036342669278383255, 0.00754685141146183, 0.051524728536605835, 0.09547996520996094, 0.13928285241127014, 0.18278059363365173, 0.22579479217529297, 0.2681208848953247, 0.30952945351600647, 0.34976696968078613, 0.38856440782546997, 0.4256414771080017, 0.46070876717567444, 0.4934753477573395, 0.5236546993255615, 0.5509694814682007, 0.5751563906669617, 0.5959693193435669, 0.613182544708252, 0.6265919208526611, 0.6360159516334534, 0.6412951350212097, 0.6422881484031677, 0.6388635039329529, 0.6309658288955688, 0.6186575889587402, 0.602112352848053, 0.581598699092865, 0.5574603080749512, 0.5300900340080261, 0.49990710616111755, 0.4673348367214203, 0.43278542160987854, 0.39663606882095337, 0.3592229187488556, 0.32084205746650696, 0.28174322843551636, 0.24213548004627228, 0.20218481123447418, 0.1620236188173294, 0.12176717072725296, 0.08150387555360794, 0.041310567408800125, 0.0012598168104887009, -0.03857453167438507, -0.07811757922172546, -0.1172863319516182, -0.15598851442337036, -0.19412188231945038, -0.2315739244222641, -0.2682223618030548, -0.3039361238479614, -0.3385757803916931, -0.3719944357872009, -0.40404364466667175, -0.43456903100013733, -0.46341243386268616, -0.4904126226902008, -0.5154051780700684, -0.5382221341133118, -0.5586912035942078, -0.5766334533691406, -0.5918626189231873, -0.6041821837425232, -0.6133822798728943, -0.6192360520362854, -0.6214874982833862, -0.6198368072509766, -0.6140332818031311, -0.6039385795593262, -0.5895386338233948, -0.5709421634674072, -0.5483677387237549, -0.5221231579780579, -0.4925788342952728, -0.460139662027359, -0.4252186119556427, -0.3882159888744354, -0.349501371383667, -0.3094020187854767, -0.26819726824760437, -0.22611777484416962, -0.18334870040416718, -0.1400429904460907, -0.09632275253534317, -0.0522911511361599, -0.00804352667182684, 0.03632388263940811, 0.08070484548807144, 0.12497598677873611, 0.1689915955066681, 0.21258056163787842, 0.2555451989173889, 0.2976619005203247, 0.33868274092674255, 0.37833932042121887, 0.4163532257080078, 0.452434241771698, 0.4862886667251587, 0.5176253318786621, 0.5461611151695251, 0.5716253519058228, 0.5937641859054565, 0.6123433113098145, 0.6271498799324036, 0.6379938721656799, 0.6447076201438904, 0.6471443176269531, 0.6451656222343445, 0.6386816501617432, 0.6277171969413757, 0.6124131679534912, 0.5930125713348389, 0.5698412656784058, 0.5432835817337036, 0.5137575268745422, 0.4816920757293701, 0.44750866293907166, 0.4116024374961853, 0.3743250370025635, 0.33598896861076355, 0.2968609035015106, 0.257163941860199, 0.21707779169082642, 0.17674489319324493, 0.13628710806369781, 0.09580041468143463, 0.055364079773426056, 0.015051072463393211, -0.025065138936042786, -0.0649108737707138, -0.10440607368946075, -0.14346158504486084, -0.18197837471961975, -0.21984706819057465, -0.2569483816623688, -0.29315370321273804, -0.32832643389701843, -0.3623214066028595, -0.3949895203113556, -0.4261786937713623, -0.45573174953460693, -0.4834882318973541, -0.5092844367027283, -0.5329533815383911, -0.5543240308761597, -0.5732192993164062, -0.5894550681114197, -0.6028378009796143, -0.6131618022918701, -0.6202048659324646, -0.6237227916717529, -0.6234235763549805, -0.619025707244873, -0.6103493571281433, -0.5973377227783203, -0.5800597667694092, -0.558700680732727, -0.5335433483123779, -0.5049428343772888, -0.4732985198497772, -0.4390256702899933, -0.40253376960754395, -0.3642062544822693, -0.3243873119354248, -0.28337332606315613, -0.2414136677980423, -0.19870540499687195, -0.15541407465934753, -0.11167067289352417, -0.06758324801921844, -0.023248950019478798, 0.02123735472559929, 0.06577356159687042, 0.11024246364831924, 0.1545058935880661, 0.19840092957019806, 0.24173812568187714, 0.28430160880088806, 0.32585087418556213, 0.3661213517189026, 0.4048379957675934, 0.44171249866485596, 0.4764506220817566, 0.5087589025497437, 0.5383500456809998, 0.5649480819702148, 0.5882924795150757, 0.6081414222717285, 0.6242743730545044, 0.6364930868148804, 0.6446221470832825, 0.6485080122947693, 0.6480104327201843, 0.6430124044418335, 0.6334987282752991, 0.6195735335350037, 0.6014490723609924, 0.5794275403022766, 0.5538786053657532, 0.5252132415771484, 0.49386104941368103, 0.4602498710155487, 0.4247856140136719, 0.38783782720565796, 0.34973233938217163, 0.31075236201286316, 0.27113354206085205, 0.23107554018497467, 0.19072695076465607, 0.15021662414073944, 0.1096506118774414, 0.06911144405603409, 0.028673723340034485, -0.011590387672185898, -0.05160680413246155, -0.09129855036735535, -0.13057954609394073, -0.16935409605503082, -0.20751625299453735, -0.24494986236095428, -0.2815292179584503, -0.31712013483047485, -0.35158050060272217, -0.38476109504699707, -0.4165118336677551, -0.44667667150497437, -0.47509610652923584, -0.5016074180603027, -0.5260446667671204, -0.5482381582260132, -0.5680128335952759, -0.5851869583129883, -0.5995701551437378, -0.610960841178894, -0.6191422939300537, -0.6238790154457092, -0.6248956322669983, -0.6218920946121216, -0.6146496534347534, -0.6030692458152771, -0.5871784090995789, -0.5671254992485046, -0.543164074420929, -0.515629231929779, -0.4849095940589905, -0.4514192044734955, -0.4155726730823517, -0.37776464223861694, -0.3383543789386749, -0.29765525460243225, -0.25593292713165283, -0.21340012550354004, -0.1702335774898529, -0.1265745759010315, -0.08253772556781769, -0.038222476840019226, 0.006276535801589489, 0.050860557705163956, 0.09541812539100647, 0.1398184895515442, 0.18390712141990662, 0.22750329971313477, 0.2703996002674103, 0.3123631477355957, 0.3531356155872345, 0.39244645833969116, 0.4300101101398468, 0.465533047914505, 0.49872052669525146, 0.5292823910713196, 0.5569380521774292, 0.5814211368560791, 0.6024831533432007, 0.6198959946632385, 0.6334537267684937, 0.6429732441902161, 0.6482937932014465, 0.6492726802825928, 0.6457772254943848, 0.6377527713775635, 0.6252648234367371, 0.6084917783737183, 0.5877084136009216, 0.5632656216621399, 0.5355637669563293, 0.5050294399261475, 0.47209271788597107, 0.4371717572212219, 0.4006486237049103, 0.36286330223083496, 0.32411476969718933, 0.2846544682979584, 0.24469275772571564, 0.20439627766609192, 0.16389751434326172, 0.12331195175647736, 0.08272752165794373, 0.04222084581851959, 0.0018642479553818703, -0.038268573582172394, -0.07810275256633759, -0.11755528301000595, -0.15653371810913086, -0.19493556022644043, -0.23264797031879425, -0.26954832673072815, -0.3055051565170288, -0.34037917852401733, -0.37402209639549255, -0.4062851071357727, -0.43701377511024475, -0.4660496711730957, -0.4932311177253723, -0.5183932185173035, -0.5413675308227539, -0.5619811415672302, -0.5800544619560242, -0.5954000949859619, -0.6078205704689026, -0.6171044707298279, -0.6230231523513794, -0.6253182291984558, -0.6236864924430847, -0.6178737878799438, -0.6077395081520081, -0.5932689309120178, -0.5745716094970703, -0.5518685579299927, -0.5254707932472229, -0.4957526624202728, -0.4631232023239136, -0.42799946665763855, -0.39078524708747864, -0.35185325145721436, -0.311533123254776, -0.2701060175895691, -0.22780375182628632, -0.18481211364269257, -0.14128455519676208, -0.09734328091144562, -0.053091470152139664, -0.008624481968581676, 0.03596140444278717, 0.08055977523326874, 0.12504689395427704, 0.16927646100521088, 0.21307659149169922, 0.2562486231327057, 0.2985678017139435, 0.3397839069366455, 0.3796292543411255, 0.4178231954574585, 0.45407381653785706, 0.4880860447883606, 0.5195674896240234, 0.5482336282730103, 0.5738129615783691, 0.5960504412651062, 0.6147108674049377, 0.6295807957649231, 0.6404695510864258, 0.6472087502479553, 0.6496512293815613, 0.6476582288742065, 0.6411396265029907, 0.6301207542419434, 0.6147440671920776, 0.5952546000480652, 0.5719805955886841, 0.5453091263771057, 0.5156607031822205, 0.4834669232368469, 0.4491514265537262, 0.4131113588809967, 0.3756999671459198, 0.3372308909893036, 0.2979716658592224, 0.2581459581851959, 0.21793389320373535, 0.17747801542282104, 0.13690036535263062, 0.09629671275615692, 0.055746305733919144, 0.015322037972509861, -0.024902716279029846, -0.06485427916049957, -0.10445264726877213, -0.14360862970352173, -0.18222306668758392, -0.22018659114837646, -0.2573797106742859, -0.2936737835407257, -0.328931987285614, -0.3630090355873108, -0.39575570821762085, -0.42701980471611023, -0.4566440284252167, -0.48446768522262573, -0.5103269815444946, -0.5340547561645508, -0.5554797649383545, -0.574424684047699, -0.5907049775123596, -0.6041268110275269, -0.6144838929176331, -0.6215535402297974, -0.6250906586647034, -0.6248021721839905, -0.6204051971435547, -0.6117189526557922, -0.5986862182617188, -0.5813759565353394, -0.559974193572998]);

.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 2px; 
 
} 
 

 
.axis line { 
 
    shape-rendering: crispEdges; 
 
    stroke: #000; 
 
} 
 

 
.grid line { 
 
    stroke: #777; 
 
    stroke-opacity: 0.65; 
 
} 
 

 
.grid .minor line { 
 
    stroke-opacity: 0.35; 
 
    stroke-dasharray: 2, 2; 
 
} 
 

 
.grid text { 
 
    display: none; 
 
} 
 

 
.grid path { 
 
    display: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class='plotting-area'> 
 

 
</div>

Answer 1

Du hast es fast, der schwierige Teil war, dass, wenn Sie Ihre set_data Methode/Funktion überprüfen Sie so etwas wie dieses finden:

this.set_data = function(data) { 
    // Update data extents 
    self.x.domain([0, data.length]); 
    self.y.domain(d3.extent(data)); 
    // Update line 
    self.update_line(data); 
    // Update axes with our new data 
    self.update_axes(); 
    // Printing new tick values for better understanding 
    10ticks [-0.6000000000000001, -0.5000000000000001, -0.4000000000000001, -0.3000000000000001, -0.2000000000000001, -0.10000000000000009, -8.881784197001253e-17, 0.09999999999999991, 0.1999999999999999, 0.29999999999999993, 0.3999999999999999, 0.4999999999999999, 0.5999999999999999] 
    20ticks [-0.6000000000000001, -0.55, -0.5000000000000001, -0.45000000000000007, -0.4000000000000001, -0.3500000000000001, -0.30000000000000004, -0.25000000000000006, -0.20000000000000007, -0.15000000000000008, -0.10000000000000007, -0.05000000000000007, -7.105427357601002e-17, 0.049999999999999926, 0.09999999999999992, 0.14999999999999994, 0.19999999999999993, 0.24999999999999992, 0.29999999999999993, 0.3499999999999999, 0.3999999999999999, 0.44999999999999996, 0.49999999999999994, 0.5499999999999999, 0.6] 
} 

Dann in Ihrem Update update_axes Methode/Funktion Sie rufen style_y_grid(self.y_grid_g);, die wie folgt definiert ist:

this.style_y_grid = function(g) { 
    g.selectAll('.tick') // get all ticks in grid 
    .data(self.y.ticks(10), function(d) { // get all the values from the 10ticks array and use them as data 
     return d; 
    }) 
    .exit() 
    .classed('minor', true); 
} 

Also, was ist das Problem? Nun, da Sie selections und die data Funktion verwenden, die das angegebene Array von Daten mit der aktuellen Auswahl verbindet. Da der Wert der Daten, die Sie für diese Auswahl verwenden, der reine Wert Ihrer Ticks ist, die Ihnen einen passenden Fehler liefern. Ihre Raster-Tick-Elemente werden mit den 20-Ticks-Werten verknüpft und Sie versuchen, mit neuen Werten (10 Ticks) zu aktualisieren, die sich von den vorherigen unterscheiden. Warum ?, dies lässt Check-out:

var tens = [-0.6000000000000001, -0.5000000000000001, -0.4000000000000001, -0.3000000000000001, -0.2000000000000001, -0.10000000000000009, -8.881784197001253e-17, 0.09999999999999991, 0.1999999999999999, 0.29999999999999993, 0.3999999999999999, 0.4999999999999999, 0.5999999999999999]; 
var twenties = [-0.6000000000000001, -0.55, -0.5000000000000001, -0.45000000000000007, -0.4000000000000001, -0.3500000000000001, -0.30000000000000004, -0.25000000000000006, -0.20000000000000007, -0.15000000000000008, -0.10000000000000007, -0.05000000000000007, -7.105427357601002e-17, 0.049999999999999926, 0.09999999999999992, 0.14999999999999994, 0.19999999999999993, 0.24999999999999992, 0.29999999999999993, 0.3499999999999999, 0.3999999999999999, 0.44999999999999996, 0.49999999999999994, 0.5499999999999999, 0.6]; 

var result = _.intersection(tens, twenties); 
[-0.6000000000000001, -0.5000000000000001, -0.4000000000000001, 0.29999999999999993, 0.3999999999999999] 

Die Werte die Zecken sind Sie als ‚großen‘ sehen Zecken in Ihrem y-Raster. Aber hey, warum funktioniert die [-1, 1] Skala? Nehmen wir das vorherige Beispiel, aber mit dem neuen Skalierungswert.

var tens = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1]; 
var twenties = [-1, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] 
var result = _.intersection(tens, twenties); 
[-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8, 1] 

Hoffe, dass dies das Problem klar gemacht. Wenn Sie einen einfachen Ansatz benötigen, können Sie dies im Prinzip tun, indem Sie alle 20 Ticks Ihres Rasters und die Hälfte von ihnen nehmen.

this.style_y_grid = function(g) { 
    g.selectAll('.tick') 
    .data(self.y.ticks(20), function(d, i) { 
     if(i % 2 === 0) return d; 
    }) 
    .exit() 
    .classed('minor', true); 
}; 

Plunkr: https://jsfiddle.net/z3r8ewmL/4/