[Solved]-Accessing values from different levels of a nested object within the same append instance using D3.js-d3.js

const svg = d3.select('svg');

const data = [   
    {"key":"comp1","values":[
        {"id": 0,"x":10,"y": 20},
        {"id": 1,"x":20,"y": 10},
        {"id": 2,"x":30,"y": 70},
        {"id": 3,"x":40,"y": 80}  
       ]},    
    {"key":"comp2","values":[
        {"id": 0,"x":10,"y": 80},
        {"id": 1,"x":20,"y": 60},
        {"id": 2,"x":30,"y": 10},
        {"id": 3,"x":40,"y": 40}   
       ]} 
];

const yScale = d3.scaleLinear().domain([0, 100]).range([20, 300]);

svg.selectAll('text')
    .data(data)   
    .enter()
    .append("text")
    .text(function(d) { return d.key; }) // so far so good
        .attr("x", function(d) { return d.values[d.values.length - 1].x; })
    .attr("y", function(d) { return yScale(d.values[d.values.length - 1].y); })
    .attr("dy", ".35em");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg style="background-color: #eee; width: 100%; height: 300px;"></svg>