#javascript #d3.js
#javascript #d3.js
Вопрос:
Я показываю диаграмму 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);
})
);
Результат:
Почему после метки 25 октября больше места? Как мне предотвратить это?
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));
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> Комментарии:
1. Можете ли вы поделиться своими необработанными / фиктивными данными, а также, если возможно, воспроизвести это в codepen / jsfiddle?
2. Я получаю данные с этого URL: api.coingecko.com/api/v3/coins/ethereum/contract /…
3. Добавлен JsFiddle.
Ответ №1:
Как и во многих аномалиях, связанных со временем, это связано с переходом на летнее время. Прошлой ночью в 3 часа ночи часы были переведены на один час назад, поэтому разрыв между часами составляет не 180, а 240 минут. Ваши значения времени указаны в миллисекундах с момента epoch, в UTC, который не имеет летнего времени. Но оси рисуются не с использованием UTC, а вашего местного часового пояса.
Рассмотрим следующий фрагмент, который устанавливает отметки каждые 3 часа в соответствии с UTC:
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>