如何在D3中正确使用径向图的标签?

huangapple go评论69阅读模式
英文:

How to correctly use labels for radial plot in D3?

问题

我是新手D3,尝试创建类似于https://observablehq.com/@d3/radial-area-chart的径向图,使用合成数据集。这是我达到的结果:如何在D3中正确使用径向图的标签?
正如您可能注意到的,我尝试使用从0到24的标签来显示数据中的24小时变化。我的问题是小时标签与圆圈线重叠。1) 如何将小时标签放置在内圆的每个相应线的中心(每小时一条线)上?2) 如何避免使此图的读者混淆径向刻度的0(显示0到180的范围)和小时的0?

我的代码在这里:https://jsfiddle.net/9swb8p6c/,合成数据.csv文件在下面。

英文:

I am new to D3 and trying to create a radial plot similar to this https://observablehq.com/@d3/radial-area-chart using synthetic dataset.This is the result I have reached: 如何在D3中正确使用径向图的标签?
As you might notice, I am trying to use labels from 0 to 24 to show 24 hours changes in my data. My problem is that there are labels for hours are overlapping with circle lines. 1) How can I place hour labels in the center of each respective line (line for each hour) in the inner circle? 2) How can I avoid confusing the reader of this plot to not confuse the 0 of radial scale (the one shows range from 0 to 180) and 0 of the hour?

My code is in: https://jsfiddle.net/9swb8p6c/ and synthetic_data.csv file is below this.

DATE_TIME,ID,HOUR,MINUTE,VALUE1,VALUE2,TIME,INSPECTION,seconds
2018-11-01 00:00:00,1,0,0,131.8403388480975,63.40706930229611,00:00:00,1,0
2018-11-01 00:20:00,1,0,20,128.66143180880016,82.4166850946821,00:20:00,1,20
2018-11-01 00:40:00,1,0,40,157.9838672230082,77.12826879097582,00:40:00,1,40
2018-11-01 01:00:00,1,1,0,154.74491894762372,77.02056153432287,01:00:00,1,60
2018-11-01 01:20:00,1,1,20,145.17425322202857,70.28572211898428,01:20:00,1,80
2018-11-01 01:40:00,1,1,40,86.33692934233684,61.306233500133004,01:40:00,1,100
2018-11-01 02:00:00,1,2,0,157.70472270832147,75.57007397898963,02:00:00,1,120
2018-11-01 02:20:00,1,2,20,92.04378773072385,52.758855696098315,02:20:00,1,140
2018-11-01 02:40:00,1,2,40,94.91482763887929,64.34713115356462,02:40:00,1,160
2018-11-01 03:00:00,1,3,0,150.58752716935703,52.573995003487525,03:00:00,1,180
2018-11-01 03:20:00,1,3,20,147.64763286003245,81.7346317353725,03:20:00,1,200
2018-11-01 03:40:00,1,3,40,152.00311766772614,69.43438782829136,03:40:00,1,220
2018-11-01 04:00:00,1,4,0,90.67568616871652,65.94364405219294,04:00:00,1,240
2018-11-01 04:20:00,1,4,20,127.6260776280666,54.41327889693226,04:20:00,1,260
2018-11-01 04:40:00,1,4,40,88.35193693321801,86.7514997924824,04:40:00,1,280
2018-11-01 05:00:00,1,5,0,99.44723697225662,61.81705113015809,05:00:00,1,300
2018-11-01 05:20:00,1,5,20,153.28490595395064,70.71671056760238,05:20:00,1,320
2018-11-01 05:40:00,1,5,40,139.53124376248127,86.96902617467873,05:40:00,1,340
2018-11-01 06:00:00,1,6,0,144.5960580946409,53.46091762212306,06:00:00,1,360
2018-11-01 06:20:00,1,6,20,110.05611978038519,73.32550566412914,06:20:00,1,380
2018-11-01 06:40:00,1,6,40,151.21482961729612,50.858838256056316,06:40:00,1,400
2018-11-01 07:00:00,1,7,0,127.88766918064593,52.45266678876003,07:00:00,1,420
2018-11-01 07:20:00,1,7,20,148.72830141013,60.496196118302194,07:20:00,1,440
2018-11-01 07:40:00,1,7,40,83.62908148257569,86.54612924908034,07:40:00,1,460
2018-11-01 08:00:00,1,8,0,113.49475177931873,59.15439348393694,08:00:00,1,480
2018-11-01 08:20:00,1,8,20,139.37377082538475,86.1347823168292,08:20:00,1,500
2018-11-01 08:40:00,1,8,40,104.5216263376223,86.92624219265554,08:40:00,1,520
2018-11-01 09:00:00,1,9,0,152.55680056900144,60.938994790632144,09:00:00,1,540
2018-11-01 09:20:00,1,9,20,140.38896796205978,56.19504976107255,09:20:00,1,560
2018-11-01 09:40:00,1,9,40,135.79579769996855,62.50941443441722,09:40:00,1,580
2018-11-01 10:00:00,1,10,0,139.82904911416367,55.70678841865249,10:00:00,1,600
2018-11-01 10:20:00,1,10,20,91.69787531743796,60.136426910820354,10:20:00,1,620
2018-11-01 10:40:00,1,10,40,96.81085932421925,80.24824051838286,10:40:00,1,640
2018-11-01 11:00:00,1,11,0,100.11254271252507,60.56291710797137,11:00:00,1,660
2018-11-01 11:20:00,1,11,20,92.56760281588778,71.09234847495347,11:20:00,1,680
2018-11-01 11:40:00,1,11,40,100.3186503333999,72.55516506446128,11:40:00,1,700
2018-11-01 12:00:00,1,12,0,82.4818356370727,87.65532538616083,12:00:00,1,720
2018-11-01 12:20:00,1,12,20,114.36084687826857,89.76606638044296,12:20:00,1,740
2018-11-01 12:40:00,1,12,40,149.2745234585085,78.59914264907545,12:40:00,1,760
2018-11-01 13:00:00,1,13,0,118.46198153923852,71.602023294704,13:00:00,1,780
2018-11-01 13:20:00,1,13,20,113.47363946789811,82.9802315554754,13:20:00,1,800
2018-11-01 13:40:00,1,13,40,124.52765200932272,79.25241460867473,13:40:00,1,820
2018-11-01 14:00:00,1,14,0,144.94079558959947,65.9708531211893,14:00:00,1,840
2018-11-01 14:20:00,1,14,20,154.48604039821853,62.47993589006475,14:20:00,1,860
2018-11-01 14:40:00,1,14,40,103.05095426442168,79.12278561261758,14:40:00,1,880
2018-11-01 15:00:00,1,15,0,88.71000005665377,72.63269391153845,15:00:00,1,900
2018-11-01 15:20:00,1,15,20,118.38725463585831,68.35955256035255,15:20:00,1,920
2018-11-01 15:40:00,1,15,40,90.35575706090954,84.996720275759,15:40:00,1,940
2018-11-01 16:00:00,1,16,0,119.53679642856682,64.48688419793011,16:00:00,1,960
2018-11-01 16:20:00,1,16,20,135.27829999848916,74.48257447199506,16:20:00,1,980
2018-11-01 16:40:00,1,16,40,155.48291761113225,83.72128851838752,16:40:00,1,1000
2018-11-01 17:00:00,1,17,0,85.96341780030743,87.73333389566491,17:00:00,1,1020
2018-11-01 17:20:00,1,17,20,148.20928658532694,68.51872403107251,17:20:00,1,1040
2018-11-01 17:40:00,1,17,40,112.90401161612891,78.71422067548829,17:40:00,1,1060
2018-11-01 18:00:00,1,18,0,87.24314271333824,85.14578512967933,18:00:00,1,1080
2018-11-01 18:20:00,1,18,20,159.98777892013288,73.91122953488058,18:20:00,1,1100
2018-11-01 18:40:00,1,18,40,134.132508027465,62.87714757838526,18:40:00,1,1120
2018-11-01 19:00:00,1,19,0,93.84757859224439,85.87709920539899,19:00:00,1,1140
2018-11-01 19:20:00,1,19,20,87.96494807670916,64.32810207816041,19:20:00,1,1160
2018-11-01 19:40:00,1,19,40,96.85350185792923,87.67564666896372,19:40:00,1,1180
2018-11-01 20:00:00,1,20,0,150.49329018102594,75.28292350135503,20:00:00,1,1200
2018-11-01 20:20:00,1,20,20,132.90939839406852,67.6641419034086,20:20:00,1,1220
2018-11-01 20:40:00,1,20,40,80.28565707426297,54.216774881412036,20:40:00,1,1240
2018-11-01 21:00:00,1,21,0,86.51819145398362,76.47547776446376,21:00:00,1,1260
2018-11-01 21:20:00,1,21,20,100.58643623741963,54.022169863784534,21:20:00,1,1280
2018-11-01 21:40:00,1,21,40,109.88077988150214,88.83099789311015,21:40:00,1,1300
2018-11-01 22:00:00,1,22,0,133.64148337171653,86.82795237554191,22:00:00,1,1320
2018-11-01 22:20:00,1,22,20,141.1790901060669,55.91956277329068,22:20:00,1,1340
2018-11-01 22:40:00,1,22,40,106.49414930906852,74.54271614590431,22:40:00,1,1360
2018-11-01 23:00:00,1,23,0,140.44553457410672,78.3447955131424,23:00:00,1,1380
2018-11-01 23:20:00,1,23,20,102.26703222395386,54.51054689408265,23:20:00,1,1400
2018-11-01 23:40:00,1,23,40,138.07031707200693,80.52691368274375,23:40:00,1,1420
2021-02-02 00:00:00,2,0,0,115.0332876844994,91.59111601641584,00:00:00,2,0
2021-02-02 00:15:00,2,0,15,87.05018984623783,96.35410552020731,00:15:00,2,15
2021-02-02 00:30:00,2,0,30,164.03653177045285,52.0465767572515,00:30:00,2,30
2021-02-02 00:45:00,2,0,45,82.7052630390898,50.096697671448055,00:45:00,2,45
2021-02-02 01:00:00,2,1,0,135.8982856119274,95.3243890863816,01:00:00,2,60
2021-02-02 01:15:00,2,1,15,168.88442076700971,90.07596205660471,01:15:00,2,75
2021-02-02 01:30:00,2,1,30,162.08156303692382,54.08270377491564,01:30:00,2,90
2021-02-02 01:45:00,2,1,45,87.6097975619715,33.436488131125216,01:45:00,2,105
2021-02-02 02:00:00,2,2,0,78.72391821017023,54.214465870458504,02:00:00,2,120
2021-02-02 02:15:00,2,2,15,146.82943988699188,40.75531924177572,02:15:00,2,135
2021-02-02 02:30:00,2,2,30,131.27245167764937,47.36698908276265,02:30:00,2,150
2021-02-02 02:45:00,2,2,45,140.75981746102622,94.6198825461017,02:45:00,2,165
2021-02-02 03:00:00,2,3,0,161.47823742929552,46.84885840001296,03:00:00,2,180
2021-02-02 03:15:00,2,3,15,124.69582145206728,41.48569358516943,03:15:00,2,195
2021-02-02 03:30:00,2,3,30,83.58436326998806,66.19168820667036,03:30:00,2,210
2021-02-02 03:45:00,2,3,45,99.21135900415828,53.450540118794734,03:45:00,2,225
2021-02-02 04:00:00,2,4,0,124.83026272228626,93.03491850617725,04:00:00,2,240
2021-02-02 04:15:00,2,4,15,135.39063042829108,45.50897740747108,04:15:00,2,255
2021-02-02 04:30:00,2,4,30,184.73390363763798,65.02563310202933,04:30:00,2,270
2021-02-02 04:45:00,2,4,45,134.25993724649402,20.216205971474512,04:45:00,2,285
2021-02-02 05:00:00,2,5,0,149.17200756231193,80.71445955298832,05:00:00,2,300
2021-02-02 05:15:00,2,5,15,93.88147839358336,36.612878889215864,05:15:00,2,315
2021-02-02 05:30:00,2,5,30,115.30107513765273,75.77571845556783,05:30:00,2,330
2021-02-02 05:45:00,2,5,45,151.26566567766207,52.99624545363579,05:45:00,2,345
2021-02-02 06:00:00,2,6,0,188.65194792973705,34.32686479979387,06:00:00,2,360
2021-02-02 06:15:00,2,6,15,182.13442004241227,74.23205650696846,06:15:00,2,375
2021-02-02 06:30:00,2,6,30,148.65366015451656,29.249079685043625,06:30:00,2,390
2021-02-02 06:45:00,2,6,45,163.20894380689668,94.83402068894529,06:45:00,2,405
2021-02-02 07:00:00,2,7,0,88.56462367937574,88.30943078593758,07:00:00,2,420
2021-02-02 07:15:00,2,7,15,141.38873824955203,58.655325304683714,07:15:00,2,435
2021-02-02 07:30:00,2,7,30,87.66370496190854,80.73824084673886,07:30:00,2,450
2021-02-02 07:45:00,2,7,45,152.15408339482462,59.93420220061918,07:45:00,2,465
2021-02-02 08:00:00,2,8,0,188.5798514298275,20.812702907057187,08:00:00,2,480
2021-02-02 08:15:00,2,8,15,129.8077675273336,93.67779359295285,08:15:00,2,495
2021-02-02 08:30:00,2,8,30,168.4670752885558,71.54543946012686,08:30:00,2,510
2021-02-02 08:45:00,2,8,45,124.79180544014923,60.06934123733269,08:45:00,2,525
2021-02-02 09:00:00,2,9,0,144.17782987794322,61.430829808073554,09:00:00,2,540
2021-02-02 09:15:00,2,9,15,106.57023220049416,94.43679915105712,09:15:00,2,555
2021-02-02 09:30:00,2,9,30,76.40935565847226,21.196103795382353,09:30:00,2,570
2021-02-02 09:45:00,2,9,45,155.24429991437148,77.32171804837404,09:45:00,2,585
2021-02-02 10:00:00,2,10,0,138.46298176928266,33.176082908278616,10:00:00,2,600
2021-02-02 10:15:00,2,10,15,124.75665721564343,43.1480491299462,10:15:00,2,615
2021-02-02 10:30:00,2,10,30,164.08690852513774,46.680467572839845,10:30:00,2,630
2021-02-02 10:45:00,2,10,45,120.09810306047743,71.96789278320395,10:45:00,2,645
2021-02-02 11:00:00,2,11,0,118.13049507104049,82.39189585977164,11:00:00,2,660
2021-02-02 11:15:00,2,11,15,147.42100181876796,91.99952079341061,11:15:00,2,675
2021-02-02 11:30:00,2,11,30,133.57313833629462,78.90752899673197,11:30:00,2,690
2021-02-02 11:45:00,2,11,45,165.28403258564413,89.71701433324165,11:45:00,2,705
2021-02-02 12:00:00,2,12,0,100.91656718421723,67.25244645219901,12:00:00,2,720
2021-02-02 12:15:00,2,12,15,130.77083370703195,51.54484511749219,12:15:00,2,735
2021-02-02 12:30:00,2,12,30,137.1881243738535,58.27574667313025,12:30:00,2,750
2021-02-02 12:45:00,2,12,45,156.14076571966763,76.64631239069837,12:45:00,2,765
2021-02-02 13:00:00,2,13,0,166.65368182246044,87.2324114422849,13:00:00,2,780
2021-02-02 13:15:00,2,13,15,126.00346211063626,65.79669817660792,13:15:00,2,795
2021-02-02 13:30:00,2,13,30,167.33684513196124,31.45111931199439,13:30:00,2,810
2021-02-02 13:45:00,2,13,45,99.06450972657933,84.9603344460232,13:45:00,2,825
2021-02-02 14:00:00,2,14,0,147.93940514833793,83.16865104511018,14:00:00,2,840
2021-02-02 14:15:00,2,14,15,102.3660770870217,74.930987752048,14:15:00,2,855
2021-02-02 14:30:00,2,14,30,134.0045071683611,96.48281550010533,14:30:00,2,870
2021-02-02 14:45:00,2,14,45,104.4586440471929,97.46630077120159,14:45:00,2,885
2021-02-02 15:00:00,2,15,0,174.8100992158399,36.8749662362937,15:00:00,2,900
2021-02-02 15:15:00,2,15,15,169.04726572533292,80.51356600592175,15:15:00,2,915
2021-02-02 15:30:00,2,15,30,147.22377882239718,20.85215915732542,15:30:00,2,930
2021-02-02 15:45:00,2,15,45,137.9022020273336,97.55560920881008,15:45:00,2,945
2021-02-02 16:00:00,2,16,0,176.00177193470836,50.25384572629634,16:00:00,2,960
2021-02-02 16:15:00,2,16,15,180.18516201265624,76.87170433805272,16:15:00,2,975
2021-02-02 16:30:00,2,16,30,89.55506933254527,27.221582622285474,16:30:00,2,990
2021-02-02 16:45:00,2,16,45,126.15497751862858,22.565116343885638,16:45:00,2,1005
2021-02-02 17:00:00,2,17,0,178.4974165139741,45.886215352397116,17:00:00,2,1020
2021-02-02 17:15:00,2,17,15,161.94532404145906,32.96561325647279,17:15:00,2,1035
2021-02-02 17:30:00,2,17,30,85.31924366474739,90.54607708217192,17:30:00,2,1050
2021-02-02 17:45:00,2,17,45,183.45632269064342,29.0684748577092,17:45:00,2,1065
2021-02-02 18:00:00,2,18,0,78.88289823106145,56.648615712109965,18:00:00,2,1080
2021-02-02 18:15:00,2,18,15,87.65633423634303,92.18505637090843,18:15:00,2,1095
2021-02-02 18:30:00,2,18,30,83.1124584972599,91.03816241547464,18:30:00,2,1110
2021-02-02 18:45:00,2,18,45,95.07814138509593,70.72622224926741,18:45:00,2,1125
2021-02-02 19:00:00,2,19,0,76.71423661624962,25.181558757289142,19:00:00,2,1140
2021-02-02 19:15:00,2,19,15,140.7504347112059,27.936081019747633,19:15:00,2,1155
2021-02-02 19:30:00,2,19,30,158.72762515548968,92.04067493048574,19:30:00,2,1170
2021-02-02 19:45:00,2,19,45,83.50193621081594,41.51177765351589,19:45:00,2,1185
2021-02-02 20:00:00,2,20,0,174.53969791813478,53.991669674171995,20:00:00,2,1200
2021-02-02 20:15:00,2,20,15,188.02674412687793,77.8944207053629,20:15:00,2,1215
2021-02-02 20:30:00,2,20,30,97.41280761177212,51.130359927460475,20:30:00,2,1230
2021-02-02 20:45:00,2,20,45,93.1394421565783,53.820607470865134,20:45:00,2,1245
2021-02-02 21:00:00,2,21,0,138.16682497619678,20.863324153925127,21:00:00,2,1260
2021-02-02 21:15:00,2,21,15,84.92047740049429,76.53620642613896,21:15:00,2,1275
2021-02-02 21:30:00,2,21,30,90.14370371408708,47.28071257198726,21:30:00,2,1290
2021-02-02 21:45:00,2,21,45,177.6953599674348,82.49308741934499,21:45:00,2,1305
2021-02-02 22:00:00,2,22,0,133.46901008088406,69.07257926062793,22:00:00,2,1320
2021-02-02 22:15:00,2,22,15,178.0749048788796,91.32480410293178,22:15:00,2,1335
2021-02-02 22:30:00,2,22,30,137.22647023566762,61.285824034826014,22:30:00,2,1350
2021-02-02 22:45:00,2,22,45,183.3787611759683,30.128555529107224,22:45:00,2,1365
2021-02-02 23:00:00,2,23,0,77.50922075132229,35.790742856672246,23:00:00,2,1380
2021-02-02 23:15:00,2,23,15,186.2257125482301,91.81718831189049,23:15:00,2,1395
2021-02-02 23:30:00,2,23,30,179.2501635022607,33.59903964399546,23:30:00,2,1410
2021-02-02 23:45:00,2,23,45,155.00797943417933,28.926531531743244,23:45:00,2,1425

答案1

得分: 0

更改x轴变量解决了我的问题。我使用了.data(d3.range(0, 24)),而不是.data(x.ticks(24))

const xAxis = (g) => g
  .attr("font-family", "sans-serif")
  .attr("font-size", 10)
  .call((g) => g.selectAll("g")
    .data(d3.range(0, 24)) // 创建一个小时值的数组
    .join("g")
      .each((d, i) => d.id = `hour-${i}`)
      .call((g) => g.append("path")
          .attr("stroke", "#000")
          .attr("stroke-opacity", 0.2)
          .attr("d", (d) => `
            M${d3.pointRadial(x(d * 60), innerRadius)}
            L${d3.pointRadial(x(d * 60), outerRadius)}
          `))
      .call((g) => g.append("path")
          .attr("id", (d) => `hour-${d}`)
          .datum((d) => [d * 60, (d + 1) * 60])
          .attr("fill", "none")
          .attr("d", ([a, b]) => `
            M${d3.pointRadial(x(a), innerRadius-10)}
            A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(x(b), innerRadius)}
          `))
      .call((g) => g.append("text")
        .append("textPath")
          .attr("startOffset", 6)
          .attr("href", (d) => `#hour-${d}`)
          .text((d) => d.toString().padStart(2, "0"))
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("transform", (d) => {
            const angle = x(d * 60);
            const radius = innerRadius - 20; // 减小半径以将标签靠近中心
            return `translate(${d3.pointRadial(x(d * 60), radius)})`;
          })
      )
  );
英文:

changing xAxis variable solved my problem. Instead of .data(x.ticks(24)), I used .data(d3.range(0, 24))

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

const xAxis = (g) =&gt; g
.attr(&quot;font-family&quot;, &quot;sans-serif&quot;)
.attr(&quot;font-size&quot;, 10)
.call((g) =&gt; g.selectAll(&quot;g&quot;)
.data(d3.range(0, 24)) // create an array of hour values
.join(&quot;g&quot;)
.each((d, i) =&gt; d.id = `hour-${i}`)
.call((g) =&gt; g.append(&quot;path&quot;)
.attr(&quot;stroke&quot;, &quot;#000&quot;)
.attr(&quot;stroke-opacity&quot;, 0.2)
.attr(&quot;d&quot;, (d) =&gt; `
M${d3.pointRadial(x(d * 60), innerRadius)}
L${d3.pointRadial(x(d * 60), outerRadius)}
`))
.call((g) =&gt; g.append(&quot;path&quot;)
.attr(&quot;id&quot;, (d) =&gt; `hour-${d}`)
.datum((d) =&gt; [d * 60, (d + 1) * 60])
.attr(&quot;fill&quot;, &quot;none&quot;)
.attr(&quot;d&quot;, ([a, b]) =&gt; `
M${d3.pointRadial(x(a), innerRadius-10)}
A${innerRadius},${innerRadius} 0,0,1 ${d3.pointRadial(x(b), innerRadius)}
`))
.call((g) =&gt; g.append(&quot;text&quot;)
.append(&quot;textPath&quot;)
.attr(&quot;startOffset&quot;, 6)
.attr(&quot;href&quot;, (d) =&gt; `#hour-${d}`)
.text((d) =&gt; d.toString().padStart(2, &quot;0&quot;))
.attr(&quot;text-anchor&quot;, &quot;middle&quot;)
.attr(&quot;alignment-baseline&quot;, &quot;middle&quot;)
.attr(&quot;transform&quot;, (d) =&gt; {
const angle = x(d * 60);
const radius = innerRadius - 20; // reduce the radius to move the labels closer to the center
return `translate(${d3.pointRadial(x(d * 60), radius)})`;
})
)
);

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月10日 21:03:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/76654024.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定