我试图在我的图表中获得主要和次要网格线，但遇到了一个非常奇怪的问题......
我的方法与此bl.ock相同 - http://bl.ocks.org/mbostock/4349486。使用两个轴实例，一个用于带标签的刻度，一个用于网格。将网格轴设置为标记轴的两倍，并使用数据连接的退出选择来设置次网格线的样式。这应该在每个专业之间给你一个小的网格线。
问题是我的代码生成了一个图表，其中有太多的网格线被设置为次要的。但是，如果您将y域修改为[-1,1]而不是数据范围（第112行：https://jsfiddle.net/z3r8ewmL/2/），它就可以正常工作。
任何帮助解决这个问题都将非常感谢！
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] ); // 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.15740123391151428, 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.3321075141429901, -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>
答案 0 :(得分：2)
你几乎得到它，棘手的部分是如果你检查你的set_data方法/功能，你会发现这样的事情：
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]
}
然后在您的更新update_axes方法/函数中调用style_y_grid(self.y_grid_g);，其定义如下：
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);
}
那么问题是什么？好吧，因为您正在使用selections和data函数将指定的数据数组与当前选择相结合。由于您用于该选择的数据的值仅仅是您的刻度值，这将给您一个匹配的错误。您的网格刻度元素与20ticks值连接，并且您尝试使用与之前的值不同的新值（10ticks）进行更新。为什么？，让我们看看：
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]
值是您在y网格中看到的“主要”刻度线。但是，嘿，为什么[-1,1]尺度有效？让我们使用新的比例值制作前面的例子。
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]
希望这表明了这个问题。如果你需要一个简单的方法，你基本上可以做到这一点，它将占用你的网格和类的所有20个刻度只是其中的一半。
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);
};