Home > database >  Replicate CSS transform animation using D3's transition()
Replicate CSS transform animation using D3's transition()

Time：08-26

I am animating a svg element with css by animating transform like following.

.test>text {
     visibility: hidden;
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;
     transform: var(--start);
     animation-name: move;
     animation-duration: 1200ms;
     animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    /*easeOutCubic*/
     animation-delay: var(--del);
     animation-direction: normal;
     animation-fill-mode: forwards;
}
 @keyframes move {
     0% {
         transform: var(--start);
    }
     100% {
         visibility: visible;
         transform: var(--finish);
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="black"></rect>
      <g  transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

Within CSS keyframe I am passing on the transform elements like following;

     @keyframes move {
     0% {
         transform: var(--start);/*translate(-233.311px,-46.0643px)rotate(180deg)translate(233.311px,46.0643px);*/
    }
     100% {
         visibility: visible;
         transform: var(--finish);/*translate(-233.311px,-46.0643px)rotate(0deg)translate(233.311px,46.0643px);*/
    }
}

I am trying to replicate the same in d3 but I am unable to do it

d3.selectAll('.test > text')
    .style('visibility', 'hidden')
    .transition(1200)
    .ease(d3.easeCubicOut)
    .delay(
        function(d, i) {
            return i * 100;
        }
    )
    .attrTween('transform', function() {
        const selection = d3.select(this);
        const node = selection.node();
        const start = node.getAttribute('data-start');
        const fin = node.getAttribute('data-finish');
        //console.log(d3.interpolateString(start, fin));
        return d3.interpolateString(start, fin);

    })
    .style('visibility', 'visible')
.test>text {    
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;     
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="black"></rect>
      <g  transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

I don't think d3.interpolateString(start, fin) is interpolating it the way CSS is doing. How can I replicate this using d3?

Just to make sure that it is not happening due to easing, I have used the same easing in d3 as in CSS easeCubicOut

Also, data-start and data-finish has the same info as css variable --start and --finish

CodePudding user response：

In D3, the value passed to the transition() method, called name in the docs, is just the name of the transition. You have to pass the duration to the duration() method. If you don't, it defaults to 250ms.

Therefore, instead of...

.transition(1200)

...it should be:

.transition()
.duration(1200)

Here's your snippet with that change:

d3.selectAll('.test > text')
    .style('visibility', 'hidden')
    .transition()
    .duration(1200)
    .ease(d3.easeCubicOut)
    .delay(
        function(d, i) {
            return i * 100;
        }
    )
    .attrTween('transform', function() {
        const selection = d3.select(this);
        const node = selection.node();
        const start = node.getAttribute('data-start');
        const fin = node.getAttribute('data-finish');
        //console.log(d3.interpolateString(start, fin));
        return d3.interpolateString(start, fin);

    })
    .style('visibility', 'visible')
.test>text {    
     font-size: 30px;
     text-rendering: geometricPrecision;
     font-family: 'Oswald', sans-serif;
     stroke: white;
     fill: white;
     text-anchor: start;     
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=DM Sans&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 720">
      <rect  width="1280" height="720" fill="black"></rect>
      <g  transform="translate(400,300)">
        <text x="-246.6640625" y="-30" data-start="translate(-242.48104095458984,-38.36601257324219)rotate(180)translate(242.48104095458984,38.36601257324219)" data-finish="translate(-242.48104095458984,-38.36601257324219)rotate(0)translate(242.48104095458984,38.36601257324219)" style="--del:0ms; --start:translate(-242.481px,-38.366px)rotate(180deg)translate(242.481px,38.366px); --finish:translate(-242.481px,-38.366px)rotate(0deg)translate(242.481px,38.366px);">A</text>
        <text x="-218.1640625" y="-30" data-start="translate(-218.16404724121094,-38.36601257324219)rotate(180)translate(218.16404724121094,38.36601257324219)" data-finish="translate(-218.16404724121094,-38.36601257324219)rotate(0)translate(218.16404724121094,38.36601257324219)" style="--del:100ms; --start:translate(-218.164px,-38.366px)rotate(180deg)translate(218.164px,38.366px); --finish:translate(-218.164px,-38.366px)rotate(0deg)translate(218.164px,38.366px);">c</text>
        <text x="-198.7890625" y="-30" data-start="translate(-194.60604095458984,-38.36601257324219)rotate(180)translate(194.60604095458984,38.36601257324219)" data-finish="translate(-194.60604095458984,-38.36601257324219)rotate(0)translate(194.60604095458984,38.36601257324219)" style="--del:200ms; --start:translate(-194.606px,-38.366px)rotate(180deg)translate(194.606px,38.366px); --finish:translate(-194.606px,-38.366px)rotate(0deg)translate(194.606px,38.366px);">c</text>
        <text x="-181.8671875" y="-30" data-start="translate(-177.6841812133789,-38.36601257324219)rotate(180)translate(177.6841812133789,38.36601257324219)" data-finish="translate(-177.6841812133789,-38.36601257324219)rotate(0)translate(177.6841812133789,38.36601257324219)" style="--del:300ms; --start:translate(-177.684px,-38.366px)rotate(180deg)translate(177.684px,38.366px); --finish:translate(-177.684px,-38.366px)rotate(0deg)translate(177.684px,38.366px);">l</text>
        <text x="-159.1953125" y="-30" data-start="translate(-159.19529724121094,-38.36601257324219)rotate(180)translate(159.19529724121094,38.36601257324219)" data-finish="translate(-159.19529724121094,-38.36601257324219)rotate(0)translate(159.19529724121094,38.36601257324219)" style="--del:400ms; --start:translate(-159.195px,-38.366px)rotate(180deg)translate(159.195px,38.366px); --finish:translate(-159.195px,-38.366px)rotate(0deg)translate(159.195px,38.366px);">i</text>
        <text x="-139.8046875" y="-30" data-start="translate(-135.62166595458984,-38.36601257324219)rotate(180)translate(135.62166595458984,38.36601257324219)" data-finish="translate(-135.62166595458984,-38.36601257324219)rotate(0)translate(135.62166595458984,38.36601257324219)" style="--del:500ms; --start:translate(-135.622px,-38.366px)rotate(180deg)translate(135.622px,38.366px); --finish:translate(-135.622px,-38.366px)rotate(0deg)translate(135.622px,38.366px);">m</text>
        <text x="-118.5703125" y="-30" data-start="translate(-118.5703125,-38.36601257324219)rotate(180)translate(118.5703125,38.36601257324219)" data-finish="translate(-118.5703125,-38.36601257324219)rotate(0)translate(118.5703125,38.36601257324219)" style="--del:600ms; --start:translate(-118.57px,-38.366px)rotate(180deg)translate(118.57px,38.366px); --finish:translate(-118.57px,-38.366px)rotate(0deg)translate(118.57px,38.366px);">a</text>
        <text x="-97.8671875" y="-30" data-start="translate(-97.8671875,-38.36601257324219)rotate(180)translate(97.8671875,38.36601257324219)" data-finish="translate(-97.8671875,-38.36601257324219)rotate(0)translate(97.8671875,38.36601257324219)" style="--del:700ms; --start:translate(-97.8672px,-38.366px)rotate(180deg)translate(97.8672px,38.366px); --finish:translate(-97.8672px,-38.366px)rotate(0deg)translate(97.8672px,38.366px);">t</text>
        <text x="-74.0546875" y="-30" data-start="translate(-74.0546875,-38.36601257324219)rotate(180)translate(74.0546875,38.36601257324219)" data-finish="translate(-74.0546875,-38.36601257324219)rotate(0)translate(74.0546875,38.36601257324219)" style="--del:800ms; --start:translate(-74.0547px,-38.366px)rotate(180deg)translate(74.0547px,38.366px); --finish:translate(-74.0547px,-38.366px)rotate(0deg)translate(74.0547px,38.366px);">i</text>
        <text x="-62.9453125" y="-30" data-start="translate(-58.762298583984375,-38.36601257324219)rotate(180)translate(58.762298583984375,38.36601257324219)" data-finish="translate(-58.762298583984375,-38.36601257324219)rotate(0)translate(58.762298583984375,38.36601257324219)" style="--del:900ms; --start:translate(-58.7623px,-38.366px)rotate(180deg)translate(58.7623px,38.366px); --finish:translate(-58.7623px,-38.366px)rotate(0deg)translate(58.7623px,38.366px);">z</text>
        <text x="-41.3515625" y="-30" data-start="translate(-37.16855239868164,-38.36601257324219)rotate(180)translate(37.16855239868164,38.36601257324219)" data-finish="translate(-37.16855239868164,-38.36601257324219)rotate(0)translate(37.16855239868164,38.36601257324219)" style="--del:1000ms; --start:translate(-37.1686px,-38.366px)rotate(180deg)translate(37.1686px,38.366px); --finish:translate(-37.1686px,-38.366px)rotate(0deg)translate(37.1686px,38.366px);">a</text>
        <text x="-20.1171875" y="-30" data-start="translate(-20.117185592651367,-38.36601257324219)rotate(180)translate(20.117185592651367,38.36601257324219)" data-finish="translate(-20.117185592651367,-38.36601257324219)rotate(0)translate(20.117185592651367,38.36601257324219)" style="--del:1100ms; --start:translate(-20.1172px,-38.366px)rotate(180deg)translate(20.1172px,38.366px); --finish:translate(-20.1172px,-38.366px)rotate(0deg)translate(20.1172px,38.366px);">t</text>
        <text x="3.7109375" y="-30" data-start="translate(3.7109375,-38.36601257324219)rotate(180)translate(-3.7109375,38.36601257324219)" data-finish="translate(3.7109375,-38.36601257324219)rotate(0)translate(-3.7109375,38.36601257324219)" style="--del:1200ms; --start:translate(3.71094px,-38.366px)rotate(180deg)translate(-3.71094px,38.366px); --finish:translate(3.71094px,-38.366px)rotate(0deg)translate(-3.71094px,38.366px);">i</text>
        <text x="14.8046875" y="-30" data-start="translate(18.987692832946777,-38.36601257324219)rotate(180)translate(-18.987692832946777,38.36601257324219)" data-finish="translate(18.987692832946777,-38.36601257324219)rotate(0)translate(-18.987692832946777,38.36601257324219)" style="--del:1300ms; --start:translate(18.9877px,-38.366px)rotate(180deg)translate(-18.9877px,38.366px); --finish:translate(18.9877px,-38.366px)rotate(0deg)translate(-18.9877px,38.366px);">o</text>
        <text x="31.7265625" y="-30" data-start="translate(35.909565925598145,-38.36601257324219)rotate(180)translate(-35.909565925598145,38.36601257324219)" data-finish="translate(35.909565925598145,-38.36601257324219)rotate(0)translate(-35.909565925598145,38.36601257324219)" style="--del:1400ms; --start:translate(35.9096px,-38.366px)rotate(180deg)translate(-35.9096px,38.366px); --finish:translate(35.9096px,-38.366px)rotate(0deg)translate(-35.9096px,38.366px);">n</text>
        <text x="53.3203125" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1500ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="64.4296875" y="-30" data-start="translate(64.4296817779541,-38.36601257324219)rotate(180)translate(-64.4296817779541,38.36601257324219)" data-finish="translate(64.4296817779541,-38.36601257324219)rotate(0)translate(-64.4296817779541,38.36601257324219)" style="--del:1600ms; --start:translate(64.4297px,-38.366px)rotate(180deg)translate(-64.4297px,38.366px); --finish:translate(64.4297px,-38.366px)rotate(0deg)translate(-64.4297px,38.366px);">i</text>
        <text x="75.5234375" y="-30" data-start="translate(75.5234375,-38.36601257324219)rotate(180)translate(-75.5234375,38.36601257324219)" data-finish="translate(75.5234375,-38.36601257324219)rotate(0)translate(-75.5234375,38.36601257324219)" style="--del:1700ms; --start:translate(75.5234px,-38.366px)rotate(180deg)translate(-75.5234px,38.366px); --finish:translate(75.5234px,-38.366px)rotate(0deg)translate(-75.5234px,38.366px);">s</text>
        <text x="96.2265625" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:1800ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="107.3203125" y="-30" data-start="translate(107.3203125,-38.36601257324219)rotate(180)translate(-107.3203125,38.36601257324219)" data-finish="translate(107.3203125,-38.36601257324219)rotate(0)translate(-107.3203125,38.36601257324219)" style="--del:1900ms; --start:translate(107.32px,-38.366px)rotate(180deg)translate(-107.32px,38.366px); --finish:translate(107.32px,-38.366px)rotate(0deg)translate(-107.32px,38.366px);">t</text>
        <text x="131.1484375" y="-30" data-start="translate(135.33144760131836,-38.36601257324219)rotate(180)translate(-135.33144760131836,38.36601257324219)" data-finish="translate(135.33144760131836,-38.36601257324219)rotate(0)translate(-135.33144760131836,38.36601257324219)" style="--del:2000ms; --start:translate(135.331px,-38.366px)rotate(180deg)translate(-135.331px,38.366px); --finish:translate(135.331px,-38.366px)rotate(0deg)translate(-135.331px,38.366px);">h</text>
        <text x="151.4296875" y="-30" data-start="translate(155.6126937866211,-38.36601257324219)rotate(180)translate(-155.6126937866211,38.36601257324219)" data-finish="translate(155.6126937866211,-38.36601257324219)rotate(0)translate(-155.6126937866211,38.36601257324219)" style="--del:2100ms; --start:translate(155.613px,-38.366px)rotate(180deg)translate(-155.613px,38.366px); --finish:translate(155.613px,-38.366px)rotate(0deg)translate(-155.613px,38.366px);">e</text>
        <text x="171.7734375" y="-30" data-start="translate(0,0)rotate(180)translate(0,0)" data-finish="translate(0,0)rotate(0)translate(0,0)" style="--del:2200ms; --start:translate(0px,0px)rotate(180deg)translate(0px,0px); --finish:translate(0px,0px)rotate(0deg)translate(0px,0px);"></text>
        <text x="182.8671875" y="-30" data-start="translate(187.05017852783203,-38.36601257324219)rotate(180)translate(-187.05017852783203,38.36601257324219)" data-finish="translate(187.05017852783203,-38.36601257324219)rotate(0)translate(-187.05017852783203,38.36601257324219)" style="--del:2300ms; --start:translate(187.05px,-38.366px)rotate(180deg)translate(-187.05px,38.366px); --finish:translate(187.05px,-38.366px)rotate(0deg)translate(-187.05px,38.366px);">k</text>
        <text x="205.5546875" y="-30" data-start="translate(209.7376937866211,-38.36601257324219)rotate(180)translate(-209.7376937866211,38.36601257324219)" data-finish="translate(209.7376937866211,-38.36601257324219)rotate(0)translate(-209.7376937866211,38.36601257324219)" style="--del:2400ms; --start:translate(209.738px,-38.366px)rotate(180deg)translate(-209.738px,38.366px); --finish:translate(209.738px,-38.366px)rotate(0deg)translate(-209.738px,38.366px);">e</text>
        <text x="225.8828125" y="-30" data-start="translate(230.06580352783203,-34.183006286621094)rotate(180)translate(-230.06580352783203,34.183006286621094)" data-finish="translate(230.06580352783203,-34.183006286621094)rotate(0)translate(-230.06580352783203,34.183006286621094)" style="--del:2500ms; --start:translate(230.066px,-34.183px)rotate(180deg)translate(-230.066px,34.183px); --finish:translate(230.066px,-34.183px)rotate(0deg)translate(-230.066px,34.183px);">y</text>
      </g>
    </svg>
    <script type="text/javascript" src="prod4.js"></script>
  </body>
</html>

Page link：https//www.codepudding.com/database/523534.html

Prev:Powershell Data Malformed with Splatting
Next:Not making list of urls in scrapy spider
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding