为什么x轴上有不规则间距？

Question

我正在使用此代码显示 d3 图表：var svg = d3    .select("#chart")    .append("svg")    .attr("width", width + margin.left + margin.right)    .attr("height", height + margin.top + margin.bottom)    .append("g")    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");var x = d3    .scaleTime()    .domain(        d3.extent(data, function (d) {            return d.x;        })    )    .range([0, width]);svg    .append("g")    .attr("transform", "translate(0," + height + ")")    .call(d3.axisBottom(x));var y = d3    .scaleLinear()    .domain(        d3.extent(data, function (d) {            return d.y;        })    )    .range([height, 0]);svg.append("g").call(d3.axisLeft(y));svg    .append("path")    .datum(data)    .attr("fill", "none")    .attr("stroke", "steelblue")    .attr("stroke-width", 1.5)    .attr(        "d",        d3        .line()        .x(function (d) {            return x(d.x);        })        .y(function (d) {            return y(d.y);        })    );结果：为什么 Oct 25 标签后面有更大的空间？我该如何防止这种情况？

Answer 1

与许多与时间相关的异常一样，这是因为夏令时。昨晚凌晨 3 点，时钟拨慢了一小时，所以时差不是 180 分钟，而是 240 分钟。您的时间值是自纪元以来的毫秒数，在 UTC 中，没有 DST。但是轴不是使用 UTC 绘制的，而是使用您当地的时区绘制的。

考虑以下代码段，它根据 UTC每 3 小时放置一次报价：

let points = {

  "prices": [

    [1603546061365, 5682.282498443263],

    [1603546376723, 5684.968260518145],

    [1603546754507, 5684.3964397624495],

    [1603547134564, 5694.944223903203],

    [1603547306978, 5695.369461269177],

    [1603547651102, 5693.132442629076],

    [1603547885395, 5695.930726690588],

    [1603548342262, 5693.802180184249],

    [1603548636505, 5692.5572028902325],

    [1603549288150, 5735.001913346532],

    [1603549466170, 5729.752182406022],

    [1603549916122, 5676.744878676553],

    [1603550186692, 5703.758610524554],

    [1603550442746, 5709.643539627184],

    [1603550670439, 5710.950013156864],

    [1603550984193, 5759.912741361529],

    [1603551342696, 5854.111847242814],

    [1603551606979, 5872.850374712791],

    [1603551896559, 5891.328428877632],

    [1603552245462, 5902.107333283351],

    [1603553291338, 5887.453990891142],

    [1603553680852, 5885.901294518506],

    [1603553955996, 5861.605266416639],

    [1603554229854, 5866.843675356144],

    [1603554685498, 5866.642002136653],

    [1603554964742, 5864.101591224471],

    [1603555234111, 5863.233011345641],

    [1603555839852, 5808.556250434988],

    [1603556067207, 5806.314131790671],

    [1603556362363, 5822.088785966513],

    [1603556720235, 5817.968491658274],

    [1603557046272, 5957.496046081174],

    [1603557305160, 5958.919566450439],

    [1603557696138, 5944.549140328778],

    [1603557859017, 5941.518031624319],

    [1603558197467, 5969.162229992385],

    [1603558576345, 6028.56094735725],

    [1603558753490, 6016.1485632666],

    [1603559116669, 6029.785094918736],

    [1603559462536, 6039.846235097952],

    [1603560057407, 6048.804925202453],

    [1603560221987, 6049.210356188233],

    [1603560686997, 6040.105302239715],

    [1603560917049, 6040.371101473078],

    [1603561251823, 6036.102748365204],

    [1603561586543, 6034.9521061356045],

    [1603561832166, 6030.554627998021],

    [1603561945521, 6040.490915920336],

    [1603562287922, 6041.487004773176],

    [1603562630353, 6040.134500531131],

    [1603562908592, 6036.951544665868],

    [1603563339855, 6030.891388410634],

    [1603563616333, 6034.939055094247],

    [1603563908706, 6022.171083519088],

    [1603564258098, 6023.780549492628],

    [1603564606272, 6019.46979064303],

    [1603564982586, 6016.559661688415],

    [1603565385613, 5980.932640803383],

    [1603565751405, 5976.179972277274],

    [1603566062568, 5973.611618077262],

    [1603566326985, 5995.004416106132],

    [1603566600730, 5998.175979584426],

    [1603566918470, 6004.4384549073475],

    [1603567252041, 6019.081168079008],

    [1603567600735, 6007.681667023986],

    [1603567881333, 5956.2498376312515],

    [1603568120958, 5942.74140090081],

    [1603568469242, 5943.327080607557],

    [1603568673790, 5946.533160987443],

    [1603569013590, 5946.149638602055],

    [1603569161357, 5956.746523098555],

    [1603569681061, 5962.165394114427],

    [1603569965128, 5967.101201850119],

    [1603570270747, 5966.6786096409905],

    [1603570466853, 5963.576094126016],

    [1603570819814, 5967.540680162767],

    [1603571150859, 5954.398040953979],

    [1603571464536, 5958.2351261468],

    [1603571769828, 5954.928339957327],

    [1603572051718, 5942.544258433555],

    [1603572392274, 5941.096427390388],

    [1603572701959, 5922.760688038915],

    [1603572969002, 5881.765951559505],

    [1603573243448, 5881.063154586546],

    [1603573579866, 5878.512663539283],

    [1603573712903, 5884.886944099509],

    [1603574050454, 5887.3963537874815],

    [1603574361572, 5770.241123280416],

    [1603574672225, 5771.610367496096],

    [1603575055906, 5761.478294630396],

    [1603575337702, 5760.639724472842],

    [1603575630203, 5756.574200509254],

    [1603575821540, 5753.082712431987],

    [1603576112160, 5765.582857548744],

    [1603576437651, 5765.106679657817],

    [1603576867667, 5756.193425983812],

    [1603577467718, 5570.925082360598],

    [1603577788023, 5606.276460029177],

    [1603578137637, 5678.945464576187],

    [1603578685163, 5718.798600595409],

    [1603579008089, 5734.634062662832],

    [1603579507677, 5690.3614485247845],

    [1603579670486, 5665.722223822327],

    [1603579976348, 5676.321782480545],

    [1603580266306, 5681.093185357833],

    [1603580630169, 5678.9744232792655],

    [1603580795260, 5643.411798399972],

    [1603581167129, 5649.548057923508],

    [1603581620901, 5648.594757883603],

    [1603581797441, 5643.166735677799],

    [1603582238408, 5646.627007271731],

    [1603582478029, 5650.797879034155],

    [1603582930887, 5655.792953294254],

    [1603583209091, 5186.216600171797],

    [1603583483749, 5172.2476268477085],

    [1603583747290, 5190.64452327681],

    [1603584120533, 5346.89160510641],

    [1603584339662, 5341.630710689571],

    [1603584689813, 5407.229690228169],

    [1603584885429, 5447.0367852343425],

    [1603585230311, 5429.65730639508],

    [1603585618042, 5437.753456100899],

    [1603585763861, 5437.077203972224],

    [1603586153252, 5424.035873615941],

    [1603586408627, 5429.332094790984],

    [1603586684312, 5436.213217693551],

    [1603587035989, 5447.005101708264],

    [1603587362876, 5298.466083944797],

    [1603587634352, 5136.807751869933],

    [1603588336516, 5159.940572677048],

    [1603588691958, 5178.008971277571],

    [1603589013618, 5220.591977699482],

    [1603589467197, 5365.9470643174045],

    [1603590097981, 5229.9017190743425],

    [1603590396477, 5230.793990217984],

    [1603590618499, 5117.589096539744],

    [1603590954440, 5187.942382178123],

    [1603591354249, 5217.227184663773],

    [1603591863936, 5247.7123452673],

    [1603591985933, 5246.829810526767],

    [1603592304122, 5239.215847482106],

    [1603592784333, 5101.527126994881],

    [1603592977122, 4993.0672400536305],

    [1603593338162, 4932.046083125147],

    [1603593671595, 4888.2922014602245],

    [1603594094387, 4814.493966236872],

    [1603594400937, 4912.556018296272],

    [1603594873373, 4925.432197131014],

    [1603595125394, 4926.4623137267945],

    [1603595458294, 4910.096501757009],

    [1603595559081, 4910.0578697730825],

    [1603596066292, 4876.5234460855245],

    [1603596330174, 4854.021823157914],

    [1603596729669, 4868.367987305708],

    [1603596909454, 4908.9292683475405],

    [1603597184829, 4872.614785649899],

    [1603597574618, 4919.380472055094],

    [1603597943524, 4952.241579033543],

    [1603598140852, 4946.926636494331],

    [1603598553387, 4970.179770365939],

    [1603598944196, 5011.363279600457],

    [1603599187056, 5128.005011823183],

    [1603599613032, 5135.0017656123],

    [1603599861847, 5166.163770461731],

    [1603600227988, 5175.217555110156],

    [1603600610894, 5177.085080167532],

    [1603600791661, 5188.497650184485],

    [1603601120501, 5180.551440752915],

    [1603601494868, 5185.486018834082],

    [1603602109559, 5165.140177123904],

    [1603602307237, 5160.573608750335],

    [1603602580745, 5145.196792943237],

    [1603602881019, 5098.9929731000175],

    [1603603177863, 5072.119474068278],

    [1603603559066, 4968.219622976716],

    [1603603856362, 5010.232085388747],

    [1603604133468, 5011.304961236376],

    [1603604452710, 5005.638828603769],

    [1603604736429, 4992.574048982211],

    [1603605087873, 4939.876275213618],

    [1603605262827, 4920.321618332807],

    [1603605628262, 4907.483559533483],

    [1603605781586, 4854.974699766342],

    [1603606227723, 4875.80991807488],

    [1603606395406, 4879.179461917806],

    [1603606714407, 4879.636309922804],

    [1603607046510, 4881.253085770624],

    [1603607425052, 4864.611695747438],

    [1603607763277, 4860.778397320919],

    [1603608082269, 4866.818538543999],

    [1603608351829, 4873.421227407662],

    [1603608639004, 4878.083578361655],

    [1603608965162, 4875.113356208963],

    [1603609274302, 4870.434665620569],

    [1603609809536, 4867.109513075488],

    [1603610348460, 4752.982127549222],

    [1603611007079, 4735.890265394347],

    [1603611412032, 4566.568696647398],

    [1603611865662, 4621.864420221876],

    [1603612148853, 4777.525848495653],

    [1603612565312, 4785.276671380142],

    [1603612918998, 4791.268520211044],

    [1603613261158, 4791.7208172560095],

    [1603613606449, 4790.488133385877],

    [1603613924366, 4808.8427626927605],

    [1603614273096, 4810.504502796033],

    [1603614745304, 4808.157794901196],

    [1603615208352, 4809.013089245778],

    [1603615785569, 4810.001993303235],

    [1603615931858, 4816.966480523035],

    [1603616146348, 4812.561149209058],

    [1603616671048, 4805.844327235994],

    [1603617027508, 4804.05248748379],

    [1603617261496, 4803.348332114384],

    [1603617396948, 4804.1439521532675],

    [1603617835354, 4797.997713716474],

    [1603618140245, 4812.216721066537],

    [1603618455871, 4831.411601800255],

    [1603618759149, 4825.2108253282895],

    [1603619389421, 4825.362086422857],

    [1603619567740, 4824.176006640535],

    [1603619893100, 4580.191888823861],

    [1603620127250, 4604.191985847007],

    [1603620521228, 4597.158717594337],

    [1603620976851, 4550.702553838976],

    [1603621470401, 4481.968569228455],

    [1603621784486, 4479.54096898209],

    [1603622073242, 4482.157710915917],

    [1603622342429, 4466.845861901261],

    [1603622678222, 4527.422489663854],

    [1603623005974, 4527.31609278099],

    [1603623439894, 4560.099254664011],

    [1603623815352, 4580.252044587726],

    [1603624045724, 4571.735446514994],

    [1603624335685, 4598.939534668465],

    [1603624694091, 4591.691647169101],

    [1603625050484, 4569.767631869415],

    [1603625390957, 4577.585269004727],

    [1603625682361, 4573.488082048553],

    [1603625950786, 4598.593478015491],

    [1603626250525, 4619.249893591276],

    [1603626613704, 4621.9843177897565],

    [1603626964550, 4623.241790115797],

    [1603627319824, 4627.736523235109],

    [1603627708802, 4626.697794111737],

    [1603627998170, 4632.61179397423],

    [1603628359456, 4637.348018923737],

    [1603628837011, 4648.634961228945],

    [1603629253765, 4647.926481911748],

    [1603629553107, 4646.466345939407],

    [1603629901541, 4679.789994572156],

    [1603630181412, 4682.604837695135],

    [1603630385009, 4683.2005606225885],

    [1603630779588, 4685.781206466239],

    [1603631054216, 4680.188576048794],

    [1603631318458, 4682.85530526703],

    [1603631628518, 4680.904946933562],

    [1603631839691, 4680.967225005357],

    [1603632041000, 4685.997974619586]

  ]

};

var margin = {

    top: 10,

    right: 30,

    bottom: 30,

    left: 60,

  },

  width = 350 - margin.left - margin.right,

  height = 350 - margin.top - margin.bottom;

var data = points["prices"].map((item) => ({

  x: item[0],

  y: item[1]

}));

var svg = d3

  .select("#chart")

  .append("svg")

  .attr("width", width + margin.left + margin.right)

  .attr("height", height + margin.top + margin.bottom)

  .append("g")

  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3

  .scaleTime()

  .domain(

    d3.extent(data, function(d) {

      return d.x;

    })

  )

  .range([0, width]);

svg

  .append("g")

  .attr("transform", "translate(0," + height + ")")

  .call(d3.axisBottom(x)

    .ticks(d3.utcHour.every(3)));

var y = d3

  .scaleLinear()

  .domain(

    d3.extent(data, function(d) {

      return d.y;

    })

  )

  .range([height, 0]);

svg.append("g").call(d3.axisLeft(y));

svg

  .append("path")

  .datum(data)

  .attr("fill", "none")

  .attr("stroke", "steelblue")

  .attr("stroke-width", 1.5)

  .attr(

    "d",

    d3

    .line()

    .x(function(d) {

      return x(d.x);

    })

    .y(function(d) {

      return y(d.y);

    })

  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<div id="chart"></div>