D3: finding the keys

Dear FCC community:

I have a question how does the matching of keys happen here. I have read a couple of articles but I am not clear whether I have understood it.

<!DOCTYPE html>
<html lang="en">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <meta charset="UTF-8">

<svg height="1000" width="1000">
    <rect id="a" x="0" y ="0" width="100" height="50"></rect>
    <rect id="b" x="0" y ="100" width="200" height="50"></rect>
    <rect id="c" x="0" y ="200" width="300" height="50"></rect>

    let svg = d3.select('svg');
    let my_data = [1,2,3];

    var num1;
    update = svg.selectAll('rect')
            .data(my_data, (d,i) => num1 = d ? d : i);

We already have 3 rectangles in our html defined, so the selectAll will give us an array of 3 elements with the keys 0,1, and 2. And on the other hand, the elements of my_data takes the values 1,2,3, since there is a key function explicitly defined. So just the elements with the keys 1 and 2 matches with each other.

Have I understood everything correctly?? I am still a beginner in d3. I hope you can help me out.

Thank you very much