1

I have a geoJSON time-series data where each timestep tells the coordinates (lon/lat) of an object orbiting Earth. I'd like to animate the path.

I have seen various posts that discuss how to animate a path using stroke-dasharray. However, when I use this, I am getting a weird effect where the animation is beginning from multiple places rather than animating sequentially in one continuous motion at the starting point.

Could anyone gently provide pointers as to why this is happening? And how can I just animate the path as one single motion?

html

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <script src="https://unpkg.com/d3-simple-slider"></script>
  <script src="https://unpkg.com/d3-interpolate-path/build/d3-interpolate-path.min.js"></script>
  <script src="https://d3js.org/d3-array.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo.v1.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>

<style>
  .graticule path {
    fill: none;
    stroke: #777;
    stroke-width: .5px;
    stroke-opacity: .5;
  }
</style>

<body>
  <div class="col-md-9 two-third-height" id="overview">
    <svg id="map-svg"></svg>
  </div>

  <script src="./script/json.js"></script>
  <script src="./script/simplified.js"></script>
</body>

</html>

simplified.js

const projection = d3.geoKavrayskiy7()
  .scale(90)
const path = d3.geoPath()
  .projection(projection);
const graticule = d3.geoGraticule();

const initMenu = () => {
  svg = d3.select("#map-svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", `0 0 1000 400`)

  svg
    .append("g")
    .attr("class", "graticule")
    .append("path")
  svg
    .append("g")
    .attr("class", "path")
}

const update = (data) => {

  // Update graticule aka the lines
  d3.select('.graticule path')
    .datum(graticule())
    .attr('d', path);

  const path = d3.select('g.path')
    .selectAll("path")
    .data([data]);

  path
    .enter()
    .append('path')
    .attr('fill-opacity', 0)
    .attr('stroke', '#444')
    .attr('stroke-width', 1)
    .attr('d', path)
    .attr("stroke-dasharray", function(d) {
      var totalLength = this.getTotalLength();
      return totalLength + " " + totalLength;
    })
    .attr("stroke-dashoffset", function(d) {
      var totalLength = this.getTotalLength();
      return totalLength;
    })
    .transition()
    .duration(20000)
    .attr("stroke-dashoffset", 0);
}

initMenu();
update(json[0]);

json.js

json = [{
  "name": "sc",
  "type": "LineString",
  "coordinates": [
    [-0.3023488559914435, 0],
    [-0.6313075572663784, 3.045572480224131],
    [-0.9593515160881194, 6.0911017625774875],
    [-1.285567232631927, 9.136653220179895],
    [-1.6089819700377215, 12.18212659271454],
    [-1.9285483597217197, 15.227358338870197],
    [-2.2431472175202503, 18.272768618683312],
    [-2.551513482319764, 21.317719440616084],
    [-2.85224698162353, 24.36269929427686],
    [-3.14368085004699, 27.407165188123788],
    [-3.4239308821715926, 30.451481272537194],
    [-3.6907111584239205, 33.495305959892896],
    [-3.941379464148551, 36.539016366850184],
    [-4.172422956070858, 39.58181354225391],
    [-4.379830619329436, 42.62448671566546],
    [-4.558291693830182, 45.66587267131504],
    [-4.701079264073997, 48.706811742210334],
    [-4.799326855716433, 51.746386119338275],
    [-4.84120740746337, 54.7845306219787],
    [-4.810439822160183, 57.820530532491496],
    [-4.684088306253928, 60.85405260806056],
    [-4.428636056579008, 63.88412211301729],
    [-3.993128556874244, 66.90991842514617],
    [-3.2964444580362855, 69.92828303832937],
    [-2.200753633671055, 72.9364429532418],
    [-0.4530817429162483, 75.92703311403822],
    [2.4640911642823635, 78.88638342173184],
    [7.774651496329223, 81.7804476138991],
    [19.019483054187884, 84.5044522792283],
    [48.08359363142479, 86.6204717165928],
    [101.5101785557299, 86.64928135361241],
    [131.17437199499886, 84.55772545704087],
    [142.62221639587597, 81.8394876393732],
    [148.0066677694011, 78.94749261995416],
    [150.9574493722945, 75.98906080863927],
    [152.72286147962936, 72.99905783747069],
    [153.8286263651313, 69.99151257186979],
    [154.5329253747693, 66.97290654995587],
    [154.97274115930725, 63.94728442421541],
    [155.23101615500778, 60.917374657208406],
    [155.36001077853803, 57.88381709386116],
    [155.39170350791375, 54.84756357965154],
    [155.35154682625128, 51.809647285452634],
    [155.2540931889109, 48.77010204493089],
    [155.11229147532006, 45.72942166746874],
    [154.9341859349289, 42.68781035476639],
    [154.72753270985666, 39.645686375053394],
    [154.49742326597328, 36.602414329347766],
    [154.24643484051842, 33.55881786766415],
    [153.9803028215597, 30.514879257237375],
    [153.7003160973889, 27.470895212202706],
    [153.40921211744507, 24.426228599212244],
    [153.10864345467954, 21.38113006284952],
    [152.80009434906302, 18.336130973554763],
    [152.4859339173522, 15.290959512186065],
    [152.16641713877064, 12.245442319885344],
    [151.84280846970174, 9.200529809994217],
    [151.51680156871203, 6.154486447136019],
    [151.18886302235674, 3.109203683572571],
    [150.8597056420548, 0.06360406011682647],
    [150.53069608598875, -2.981985968659241],
    [150.20293048220165, -6.027767344541169],
    [149.87671201079146, -9.072847033457323],
    [149.5532198155647, -12.118316058508341],
    [149.23318449286052, -15.163839826582368],
    [148.91888275496177, -18.20886621528444],
    [148.61034261716125, -21.253879467475848],
    [148.3093708359102, -24.299052416521107],
    [148.01762238586502, -27.34334932131136],
    [147.73680459176447, -30.387777596809872],
    [147.4701813926463, -33.43168329226274],
    [147.21934229129272, -36.47551938107876],
    [146.98765159757244, -39.518755078741286],
    [146.7792606959376, -42.56073701632341],
    [146.6006932635956, -45.60252730225923],
    [146.45690802432512, -48.64304110935205],
    [146.35752507325785, -51.68281546803846],
    [146.31396863197187, -54.72066343451368],
    [146.34312108607483, -57.75690186814093],
    [146.46793629461212, -60.790622148867946],
    [146.72026451939539, -63.821065397516726],
    [147.1506073448508, -66.84697360166169],
    [147.84102418146534, -69.8653186885088],
    [148.92607269874438, -72.8739110175439],
    [150.6564218251841, -75.8648924669358],
    [153.54039318256343, -78.82511021717274],
    [158.7779455037142, -81.72120864013141],
    [169.82521006869496, -84.45103248240518],
    [-161.70227216394878, -86.59069197744235],
    [-108.30824009149775, -86.67717620230687],
    [-78.03417736568657, -84.6107729271818],
    [-66.37824735817671, -81.89850699432647],
    [-60.92016043248472, -79.00890948778398],
    [-57.93497084745334, -76.05148737852956],
    [-56.15099027966128, -73.06136222934416],
    [-55.033254912046566, -70.05424427086992],
    [-54.324138432262544, -67.03582295019964],
    [-53.87946068907352, -64.01105205000687],
    [-53.61757480857655, -60.98089194530891],
    [-53.48691562876568, -57.94734334254483],
    [-53.452359357394386, -54.91091553370058],
    [-53.491389432983226, -51.873425105934736],
    [-53.588135957543024, -48.833694927518174],
    [-53.72909218307837, -45.79293835590187],
    [-53.90605956723321, -42.7516197688688],
    [-54.11214944835567, -39.70916399593048],
    [-54.34251793057844, -36.66589460992499],
    [-54.59286638688032, -33.622603387245654],
    [-54.858268498952036, -30.578562545627495],
    [-55.13849880352984, -27.53434286991515],
    [-55.42934348201187, -24.489858992079043],
    [-55.72992530279169, -21.4450132151772],
    [-56.038066989423946, -18.399995108894878],
    [-56.35234448629926, -15.35441006027108],
    [-56.67158801118179, -12.309386248309846],
    [-56.994699683921176, -9.26376240130459],
    [-57.321025872367024, -6.2184607729619445],
    [-57.64917407184198, -3.172770367162938],
    [-57.9780455664196, -0.12721376198849713],
    [-58.30684670260434, 2.918373017307784],
    [-58.63495530170217, 5.963781465772357],
    [-58.96127516045728, 9.00957653986657],
    [-59.2851068405479, 12.054992368955574],
    [-59.60428760735822, 15.100282313197107],
    [-59.91921853462898, 18.14537271761683],
    [-60.22796442519372, 21.190425835901294],
    [-60.529182952622406, 24.235683205750735],
    [-60.8214379952935, 27.28005696216565],
    [-61.10156568466831, 30.3240157994044],
    [-61.36946463421851, 33.36840765690169],
    [-61.6208202514118, 36.4114920749573],
    [-61.85246839039053, 39.454827506048986],
    [-62.06092647481985, 42.497664473249735],
    [-62.24081828757504, 45.53901718913331],
    [-62.38562717179711, 48.57993502501733],
    [-62.48562628200702, 51.61942985873955],
    [-62.529878796777346, 54.6574037188813],
    [-62.5032344983647, 57.693646067251684],
    [-62.38121036114661, 60.72708185825088],
    [-62.132166589490915, 63.75789477106267],
    [-61.705559882449755, 66.78368382348542],
    [-61.02220444725587, 69.80234052710293],
    [-59.9467607788153, 72.81102697688793],
    [-58.233676685942264, 75.80261095239331],
    [-55.38249581120626, 78.76381466159191],
    [-50.21564843871536, 81.66133604622438],
    [-39.36265475629664, 84.39738186247222],
    [-11.470942506032458, 86.56000270923317],
    [41.85673262637384, 86.7040663507409],
    [72.74963431602002, 84.66354584276995],
    [84.61711886058968, 81.95761868322151],
    [90.15450279753725, 79.07035892785785],
    [93.17384732136419, 76.1135413075392],
    [94.97578821488642, 73.12447386140845],
    [96.10326123273235, 70.11733980251694],
    [96.81948264604588, 67.09928466103207],
    [97.26842674888695, 64.07403204115755],
    [97.53351479547334, 61.044241477505714],
    [97.66655741534429, 58.0108406825411],
    [97.7027466398964, 54.974423775410536],
    [97.6647082634673, 51.93678608993595],
    [97.56993213876866, 48.89723733385315],
    [97.42992051800792, 45.85669422046659],
    [97.25303834578213, 42.81493808876283],
    [97.04754843821604, 39.772305825012666],
    [96.81787920436238, 36.72978256662799],
    [96.56865203994364, 33.68595065285788],
    [96.30222682502657, 30.642047782867213],
    [96.02252396805952, 27.597689921265836],
    [95.73195898498668, 24.553343646603373],
    [95.43198144989842, 21.508494247008638],
    [95.12377381681718, 18.46347767516038],
    [94.80988992623702, 15.418022817352217],
    [94.49014564329246, 12.372693186329492],
    [94.1670845819406, 9.327664628645671],
    [93.84141255807707, 6.281883784921206],
    [93.5133678138644, 3.2364069310141117],
    [93.18433698436688, 0.19081923619362348],
    [92.85520461517311, -2.854741734089806],
    [92.52690095422616, -5.900436334863375],
    [92.20073473399049, -8.94577001515809],
    [91.87727949579234, -11.99112122084134],
    [91.55714066214031, -15.036853715486492],
    [91.24229050861507, -18.08203356603381],
    [90.93364689634446, -21.126719799986372],
    [90.63224328409513, -24.17154258932907],
    [90.34031156142265, -27.216350818248685],
    [90.05902268630052, -30.260918182810247],
    [89.79137041374649, -33.30452612627256],
    [89.5399799698115, -36.34809128104147],
    [89.3071097353302, -39.39107660525553],
    [89.09849662356268, -42.43407630214879],
    [88.91788813700578, -45.475203441229425],
    [88.77286904642385, -48.51603988233062],
    [88.67142041427596, -51.555542920298535],
    [88.62589903514905, -54.59407996566002],
    [88.65109750074846, -57.63034956575631],
    [88.77060122387597, -60.66383334155819],
    [89.01634663983842, -63.694467686817234],
    [89.43887655295669, -66.72010735522656],
    [90.11691694152663, -69.73956148194067],
    [91.1805419678935, -72.74801865661748],
    [92.87699634597318, -75.74028993143502],
    [95.69479285879467, -78.7020980378339],
    [100.79138840420595, -81.60232687490286],
    [111.4563430524232, -84.34351502658383],
    [138.77698841090034, -86.52836302988472],
    [-167.9938259926123, -86.72989581221717],
    [-136.47396174077417, -84.71606854869493],
    [-124.38871778773753, -82.01656940700674],
    [-118.77325731512362, -79.13143731875398],
    [-115.71856933420227, -76.17539121042284],
    [-113.89948453588043, -73.18676954506746],
    [-112.76044245429038, -70.18016173753287],
    [-112.03716159180503, -67.16213773194859],
    [-111.58346875248846, -64.13728360080384],
    [-111.31533321259575, -61.10737777586597],
    [-111.17892232227983, -58.07392260241931],
    [-111.14153653163957, -55.03798178098111],
    [-111.17776123317917, -52.000142030013826],
    [-111.27217335279913, -48.960830144065824],
    [-111.41125594882233, -45.91999928782098],
    [-111.58742109970476, -42.87860195703451],
    [-111.79259016854391, -39.835799612644436],
    [-112.0217594116837, -36.79326048776925],
    [-112.2706958927496, -33.749894914239405],
    [-112.53665938730339, -30.705676257618638],
    [-112.81576006257768, -27.661671963611145],
    [-113.10616160617204, -24.616981240158708],
    [-113.40659875017622, -21.57209195211385],
    [-113.71406998505464, -18.526984589930166],
    [-114.0280879599873, -15.481662491501663],
    [-114.34751044796403, -12.43666603075576],
    [-114.67052177676277, -9.390928745361176],
    [-114.99691621067053, -6.345280734968481],
    [-115.32462490802843, -3.2999890522691118],
    [-115.65372072166143, -0.25442861738026956],
    [-115.98236261024074, 2.7911754948716716],
    [-116.31047185393425, 5.836487893219857],
    [-116.63697735634761, 8.88203062664952],
    [-116.96087660679972, 11.927887707830141],
    [-117.28076509581702, 14.972856716975723],
    [-117.59573140029221, 18.018354476145287],
    [-117.90451289220098, 21.063301829772666],
    [-118.20637119744823, 24.108128080235996],
    [-118.49830548668751, 27.152888154480447],
    [-118.77964257265538, 30.197210836487177],
    [-119.04745316574838, 33.2410611705452],
    [-119.2995122492985, 36.2848990898796],
    [-119.53257847246591, 39.32796842941962],
    [-119.74185050309868, 42.37035885790301],
    [-119.92315630279982, 45.41182464457625],
    [-120.06929003947602, 48.45292053572346],
    [-120.17135819586969, 51.49210563834619],
    [-120.2192896985909, 54.53032570014871],
    [-120.1953722459573, 57.56707389668018],
    [-120.07836083667578, 60.60067362962539],
    [-119.83492631698675, 63.631387144880065],
    [-119.41624387762567, 66.6572670921226],
    [-118.74627409615765, 69.67629331087346],
    [-117.6908088275561, 72.6856155137359],
    [-116.01178970560844, 75.67821363040808],
    [-113.22547572930192, 78.64109184114778],
    [-108.19965058365133, 81.54262237615231],
    [-97.71795309878482, 84.28943622621254],
    [-70.95824109996634, 86.49594169009085],
    [-17.86095755954425, 86.75469758137673],
    [14.294398099506223, 84.7683142119176],
    [26.603041282798664, 82.07569555019927],
    [32.29767008412572, 79.19234307191958],
    [35.38813054471107, 76.238107838831],
    [37.2267745376307, 73.24972852626054],
    [38.37584636700151, 70.24300602317511],
    [39.106690377003204, 67.22510963882854],
    [39.56472853007683, 64.20029352472193],
    [39.836146560166654, 61.170626123939186],
    [39.97430218842225, 58.13756961162872],
    [40.013630003456015, 55.10160675203734],
    [39.978581606718876, 52.06349968809701],
    [39.885993267830585, 49.024428597524185],
    [39.74689409409978, 45.983738526247606],
    [39.572258851162424, 42.94203228137465],
    [39.36708844471829, 39.90009162765984],
    [39.13820672339272, 36.85684383439464],
    [38.889878561316515, 33.813385695673496],
    [38.624375221672494, 30.76912360579221],
    [38.34523240069312, 27.725153025300415],
    [38.05533341435303, 24.680647324351128],
    [37.75531669911636, 21.63552326556002],
    [37.44787692306938, 18.59042429525497],
    [37.13385191881863, 15.545245739519556],
    [36.814641124501215, 12.499964617051456],
    [36.49128132191953, 9.454867030033439],
    [36.165788663332656, 6.409297578298321],
    [35.83751745406171, 3.3635836711317473],
    [35.5085072407756, 0.3180320993586174],
    [35.17948666154323, -2.727574930326246],
    [34.85175195546459, -5.773162323600621],
    [34.52515903362366, -8.818802893479315],
    [34.20108023947484, -11.864008188612265],
    [33.8809848421932, -14.909275224580687],
    [33.566306284163005, -17.954485157482324],
    [33.25676488767936, -20.999503902843212],
    [32.95549637945566, -24.044835718803224],
    [32.6628833452963, -27.089263669914136],
    [32.38113106505414, -30.13366592300555],
    [32.11340585865883, -33.17782302426036],
    [31.860634938968854, -36.22103796561524],
    [31.6272110234296, -39.26441333729015],
    [31.417429449770488, -42.306609984484695],
    [31.235514657080003, -45.34825661605679],
    [31.08879867870489, -48.3888661129614],
    [30.984908382283006, -51.42863167260751],
    [30.93651469018958, -54.46727507766331],
    [30.959441795084956, -57.50325213773873],
    [31.07394937251371, -60.53761635008906],
    [31.314386903550574, -63.56769920974552],
    [31.72745241100606, -66.59401247151453],
    [32.39234915580023, -69.61362806349229],
    [33.43669842993303, -72.6226289537069],
    [35.09888401051565, -75.61590875470792],
    [37.8558259681781, -78.57968247151892],
    [42.81446765987951, -81.48295223133707],
    [53.114307608679894, -84.23516673810259],
    [79.32346632393069, -86.4625954352851],
    [132.2571924343151, -86.77845788281515],
    [165.05532348429196, -84.82039538758426],
    [177.59205449969542, -82.13437940997268],
    [-176.63209426493083, -79.2534860076738],
    [-173.50573572029785, -76.30010691022163],
    [-171.6480155085273, -73.3121932494118],
    [-170.48791145391164, -70.30584684395433],
    [-169.7503513953277, -67.2883067578315],
    [-169.28743995608363, -64.26371328651803],
    [-169.01275970002794, -61.23389755664451],
    [-168.87234264570546, -58.20057900131123],
    [-168.83096255562376, -55.16491426776261],
    [-168.86471961720557, -52.12704081273665],
    [-168.9565997309153, -49.087631797282256],
    [-169.0944123878255, -46.04692221011652],
    [-169.26879087961507, -43.005753055012306],
    [-169.47292468116729, -39.963303047527575],
    [-169.7011963343506, -36.92019562089875],
    [-169.94958589363728, -33.87693592391778],
    [-170.21453629863373, -30.833077335063166],
    [-170.49323288584853, -27.78853599399221],
    [-170.78334684345785, -24.744379806425812],
    [-171.0830611405299, -21.69891285645182],
    [-171.39054926149018, -18.654473807518546],
    [-171.7044019264896, -15.608920251381752],
    [-172.02342186318953, -12.563965721726223],
    [-172.34642613534308, -9.518174116349584],
    [-172.67232196515226, -6.472708464635084],
    [-173.00024590173066, -3.4272298027563255],
    [-173.32908964938662, -0.3816379122486284],
    [-173.65813368409204, 2.663949377432655],
    [-173.98631747120882, 5.709507139007023],
    [-174.31281811587468, 8.755001602480583],
    [-174.6366452084603, 11.80028669021492],
    [-174.95675920218503, 14.84592425587694],
    [-175.27202433426476, 17.89112996713632],
    [-175.58126651765457, 20.936333095759235],
    [-175.88301664686026, 23.98090442873926],
    [-176.17572359298694, 27.025720848792187],
    [-176.4575054244638, 30.070085193702567],
    [-176.72615514746184, 33.11412529331916],
    [-176.97895953422938, 36.157680644149046],
    [-177.2126858586605, 39.20071843490879],
    [-177.42328191496546, 42.24317413322983],
    [-177.60570798217393, 45.28463657743473],
    [-177.75343139856653, 48.32589794217247],
    [-177.85783401745326, 51.36529397081948],
    [-177.90756480975955, 54.4037935962267],
    [-177.88699450197228, 57.43988909360956],
    [-177.7742230758897, 60.473944486697334],
    [-177.5372444580213, 63.50487868252385],
    [-177.12798692060647, 66.53109777078521],
    [-176.47008784178468, 69.5506106397131],
    [-175.43499847431215, 72.55989116408526],
    [-173.78949439115374, 75.55339884340567],
    [-171.0637887331026, 78.51821154722859],
    [-166.17038085037882, 81.42349869460675]
  ]
}]

EDIT: Video: https://i.stack.imgur.com/qAWJG.jpg

path attributes

d: path("M 479.589 250 L 479.142 245.216 L 478.697 240.432 L 478.258 235.648 L 477.826 230.864 L 477.405 226.081 L 476.996 221.297 L 476.603 216.514 L 476.228 211.731 L 475.875 206.949 L 475.547 202.167 L 475.247 197.386 L 474.981 192.605 L 474.752 187.825 L 474.566 183.046 L 474.43 178.268 L 474.351 173.492 L 474.338 168.717 L 474.404 163.945 L 474.563 159.176 L 474.835 154.411 L 475.248 149.651 L 475.844 144.898 L 476.683 140.157 L 477.867 135.432 L 479.579 130.734 L 482.182 126.086 L 486.526 121.54 L 495.06 117.261 L 516.14 113.937 L 556.238 113.892 L 583.737 117.177 L 599.575 121.447 L 610.933 125.99 L 620.084 130.637 L 627.87 135.333 L 634.684 140.058 L 640.744 144.799 L 646.18 149.552 L 651.085 154.311 L 655.526 159.076 L 659.549 163.846 L 663.197 168.618 L 666.499 173.392 L 669.48 178.168 L 672.163 182.946 L 674.565 187.725 L 676.703 192.505 L 678.588 197.286 L 680.234 202.067 L 681.649 206.849 L 682.844 211.631 L 683.825 216.415 L 684.601 221.198 L 685.176 225.981 L 685.557 230.765 L 685.748 235.548 L 685.754 240.333 L 685.578 245.116 L 685.222 249.9 L 684.69 254.684 L 683.984 259.468 L 683.106 264.252 L 682.057 269.035 L 680.837 273.819 L 679.448 278.602 L 677.889 283.386 L 676.16 288.169 L 674.261 292.951 L 672.19 297.733 L 669.947 302.514 L 667.529 307.296 L 664.933 312.076 L 662.158 316.854 L 659.202 321.632 L 656.06 326.408 L 652.731 331.183 L 649.211 335.955 L 645.501 340.724 L 641.602 345.49 L 637.52 350.25 L 633.269 355.003 L 628.885 359.744 L 624.435 364.47 L 620.067 369.168 L 616.115 373.818 L 613.433 378.367 L 613.278 380.559 L 614.635 382.655 L 618.846 384.461 M 341.154 384.461 L 358.368 386.016 L 398.716 386.152 L 418.364 382.906 L 424.414 378.646 L 426.165 374.107 L 426.289 369.461 L 425.678 364.765 L 424.702 360.041 L 423.53 355.3 L 422.259 350.548 L 420.939 345.789 L 419.6 341.023 L 418.265 336.254 L 416.946 331.483 L 415.651 326.708 L 414.388 321.931 L 413.161 317.154 L 411.974 312.375 L 410.829 307.595 L 409.729 302.814 L 408.677 298.033 L 407.673 293.251 L 406.72 288.469 L 405.82 283.686 L 404.973 278.903 L 404.182 274.119 L 403.45 269.336 L 402.776 264.551 L 402.163 259.768 L 401.614 254.984 L 401.13 250.2 L 400.714 245.416 L 400.367 240.632 L 400.094 235.848 L 399.896 231.064 L 399.778 226.281 L 399.741 221.497 L 399.79 216.714 L 399.93 211.931 L 400.163 207.149 L 400.498 202.367 L 400.937 197.585 L 401.488 192.805 L 402.159 188.025 L 402.957 183.245 L 403.893 178.467 L 404.977 173.691 L 406.225 168.916 L 407.653 164.144 L 409.28 159.375 L 411.136 154.61 L 413.255 149.849 L 415.686 145.096 L 418.501 140.355 L 421.813 135.629 L 425.809 130.93 L 430.851 126.278 L 437.75 121.727 L 448.755 117.429 L 471.365 114.032 L 511.391 113.806 L 537.391 117.011 L 550.776 121.261 L 559.585 125.797 L 566.3 130.441 L 571.804 135.136 L 576.493 139.86 L 580.575 144.601 L 584.177 149.353 L 587.377 154.112 L 590.234 158.877 L 592.791 163.646 L 595.077 168.418 L 597.119 173.192 L 598.938 177.968 L 600.549 182.746 L 601.968 187.526 L 603.206 192.305 L 604.274 197.086 L 605.181 201.868 L 605.934 206.65 L 606.542 211.432 L 607.01 216.215 L 607.343 220.998 L 607.547 225.781 L 607.625 230.565 L 607.583 235.348 L 607.424 240.132 L 607.149 244.916 L 606.763 249.7 L 606.268 254.484 L 605.666 259.268 L 604.96 264.052 L 604.15 268.836 L 603.239 273.62 L 602.228 278.403 L 601.118 283.186 L 599.91 287.969 L 598.605 292.751 L 597.203 297.534 L 595.705 302.315 L 594.112 307.095 L 592.423 311.875 L 590.641 316.655 L 588.764 321.432 L 586.795 326.209 L 584.734 330.983 L 582.586 335.756 L 580.355 340.526 L 578.049 345.291 L 575.683 350.051 L 573.282 354.804 L 570.888 359.547 L 568.578 364.272 L 566.51 368.973 L 565.013 373.625 L 564.902 378.181 L 568.579 382.486 L 574.049 384.393 L 584.558 385.918 L 614.163 386.558 M 345.837 386.558 L 354.098 386.235 L 366.275 384.891 L 372.469 383.072 L 376.082 378.831 L 375.263 374.299 L 372.92 369.656 L 369.996 364.962 L 366.867 360.239 L 363.695 355.498 L 360.564 350.747 L 357.517 345.987 L 354.576 341.222 L 351.753 336.453 L 349.054 331.682 L 346.483 326.908 L 344.04 322.131 L 341.725 317.354 L 339.539 312.574 L 337.482 307.795 L 335.551 303.014 L 333.746 298.232 L 332.068 293.451 L 330.515 288.668 L 329.088 283.885 L 327.787 279.102 L 326.613 274.319 L 325.565 269.535 L 324.646 264.751 L 323.856 259.967 L 323.197 255.184 L 322.671 250.4 L 322.28 245.616 L 322.027 240.832 L 321.914 236.048 L 321.944 231.264 L 322.122 226.481 L 322.452 221.697 L 322.938 216.914 L 323.585 212.131 L 324.4 207.348 L 325.39 202.566 L 326.562 197.785 L 327.924 193.004 L 329.487 188.224 L 331.262 183.445 L 333.262 178.667 L 335.503 173.89 L 338.003 169.116 L 340.782 164.344 L 343.871 159.574 L 347.299 154.809 L 351.113 150.048 L 355.37 145.295 L 360.149 140.553 L 365.574 135.826 L 371.84 131.125 L 379.308 126.471 L 388.751 121.913 L 402.243 117.598 L 426.493 114.132 L 466.623 113.726 L 491.249 116.846 L 502.199 121.076 L 508.451 125.605 L 512.715 130.245 L 515.923 134.94 L 518.474 139.663 L 520.569 144.403 L 522.323 149.154 L 523.809 153.913 L 525.074 158.678 L 526.151 163.447 L 527.068 168.219 L 527.842 172.993 L 528.489 177.769 L 529.021 182.547 L 529.449 187.325 L 529.781 192.105 L 530.025 196.886 L 530.187 201.668 L 530.272 206.449 L 530.287 211.232 L 530.235 216.015 L 530.12 220.798 L 529.947 225.582 L 529.717 230.365 L 529.435 235.148 L 529.104 239.932 L 528.726 244.716 L 528.304 249.5 L 527.84 254.284 L 527.337 259.068 L 526.797 263.853 L 526.221 268.636 L 525.613 273.419 L 524.975 278.203 L 524.308 282.986 L 523.615 287.77 L 522.897 292.552 L 522.157 297.334 L 521.399 302.116 L 520.624 306.896 L 519.835 311.676 L 519.037 316.455 L 518.232 321.233 L 517.427 326.009 L 516.627 330.784 L 515.841 335.557 L 515.081 340.326 L 514.359 345.092 L 513.7 349.852 L 513.135 354.606 L 512.718 359.349 L 512.536 364.075 L 512.754 368.777 L 513.701 373.433 L 516.15 377.993 L 522.317 382.316 L 539.867 385.815 L 578.992 386.311 L 609.733 383.236 L 628.013 379.016 L 632.955 377.476 M 327.045 377.476 L 324.574 374.491 L 319.752 369.852 L 314.503 365.159 L 309.206 360.436 L 304.02 355.696 L 299.019 350.945 L 294.234 346.186 L 289.68 341.421 L 285.36 336.653 L 281.273 331.881 L 277.416 327.107 L 273.785 322.33 L 270.377 317.553 L 267.185 312.774 L 264.207 307.994 L 261.438 303.214 L 258.875 298.432 L 256.515 293.65 L 254.357 288.868 L 252.397 284.085 L 250.636 279.302 L 249.072 274.518 L 247.704 269.735 L 246.534 264.951 L 245.561 260.167 L 244.787 255.383 L 244.213 250.599 L 243.842 245.815 L 243.675 241.032 L 243.717 236.248 L 243.97 231.464 L 244.439 226.68 L 245.129 221.897 L 246.045 217.113 L 247.195 212.331 L 248.585 207.548 L 250.224 202.766 L 252.122 197.984 L 254.289 193.204 L 256.737 188.424 L 259.482 183.645 L 262.539 178.867 L 265.928 174.09 L 269.671 169.316 L 273.796 164.543 L 278.334 159.774 L 283.327 155.008 L 288.825 150.247 L 294.895 145.493 L 301.626 140.75 L 309.15 136.023 L 317.672 131.321 L 327.554 126.664 L 339.534 122.1");
stroke-dasharray: 2538.95, 2538.95;
stroke-dashoffset: 0;
hiswendy
  • 373
  • 1
  • 3
  • 14
  • Alternatively to the `stroke-dasharray`/`stroke-dashoffset` approach, you can use [clipping](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking) and dynamically update the `clipPath` – Jan Stránský Aug 13 '20 at 09:51
  • What does your resulting `d` attribute look like? I cannot get any sense out of `path.attr('d', path)` in your code example. – ccprog Aug 13 '20 at 12:36
  • @ccprog: I have added in the path attribute as part of my post. But to clarify, it's the path of an object orbiting earth, and I have added in a video to demonstrate what's currently happening. – hiswendy Aug 13 '20 at 15:52
  • I have tried your code with `Uncaught ReferenceError: Cannot access 'path' before initialization` in simplified.js, line 27 – Jan Stránský Aug 13 '20 at 16:02
  • The path `d` attribute you quoted consists of 4 separate supaths (= contains the letter `M` four times). Dashed lines are started [for each subpath](https://www.w3.org/TR/SVG2/painting.html#DataTypeDasharray) separately. Looking at your video, your complete graph seems to have, If I am counting right, 12 separate subpaths. That would suggest that there are two more path elements? Your post gives no hint where these are comming from or what is really happening. – ccprog Aug 13 '20 at 16:17
  • @ccprog: Your comment provided me the insight for the solution I came up for now. Based on the coordinates I have in the json file, I realized D3 had to pass back one giant path with multiple subpaths because the object is _orbiting_ earth. So when the line goes "outside" of the lat/lon, it must reappear on the other side. So rather than one giant path, I broke it up into each individual subpath and added in animation-delay. That solution works. By any chance, do you know of another solution? – hiswendy Aug 13 '20 at 19:27
  • THat sounds about right. – ccprog Aug 13 '20 at 22:40

2 Answers2

0

You just need to properly set combination of stroke-dasharray and stroke-dashoffset. One option is to set the stroke-dasharray as one "long" line and one "long" space, set stroke-dashoffset such that the line is intially only the space and update the value of stroke-dashoffset to show the relevant part of the path:

<!DOCTYPE html>
<html>
<body>
    <svg width="300" height="300">
        <path id="path0" d="M 50 50 H 250 L 50 250 H 250" stroke-width="5" stroke="black" fill="none" stroke-dasharray="1000 1000" stroke-dashoffset="1000"/>
    </svg>
    <script>
        var p = document.getElementById("path0")
        var i = 1000
        setInterval(function(){ p.setAttribute("stroke-dashoffset",i--) },10)
    </script>
</body>
</html>
Jan Stránský
  • 1,671
  • 1
  • 11
  • 15
  • @user:2700104: But I did calculate stroke-dasharray and stroke-dashoffset in the javascript. ```.attr("stroke-dasharray", function(d) {var totalLength = this.getTotalLength(); return totalLength + " " + totalLength;}).attr("stroke-dashoffset", function(d) {var totalLength = this.getTotalLength(); return totalLength;}) ``` So why is this occurring? – hiswendy Aug 13 '20 at 15:53
  • @hiswendy Sorry, haven't noticed that. Can you check the value of `totalLength` before using? (I have tried the code, but it has errors, see my comment under the OP) – Jan Stránský Aug 13 '20 at 16:13
0

I realized from @ccprog's comment my path had multiple "M" commands, which would explain why there is no "continuous" animation. I realized this must be done because an object orbiting Earth goes around the sphere, but SVG's are not able to convey this--hence the multiple "M" commands.

What I ended up doing is taking the generated path attribute and breaking it up into sub-paths and adding an animation-delay.

hiswendy
  • 373
  • 1
  • 3
  • 14