Pass D3.js data based on ID specified in data

I have this randomly generated JSON string:

let jsonText = '{"data": [{"id": 4,"x": 16.53,"y": 66.19,"phi": 2.4},{"id": 2,"x": 14.09,"y": 13.15,"phi": 0.13},{"id": 9,"x": 58.04,"y": 67.88,"phi": 2.96}]}';  

It's an object containing information about 3 SVG groups specified by id number. I want to pass data to these group elements based on the ID in the array, for example to <g id="4"> pass the first coords and angle etc.

All I have now is this function:

function on_render_body(jsonfile) {      //parse the text and save it to object      let parsedText = JSON.parse(jsonfile);      //create data array of positions and stuff      let data = [0];      parsedText.data.forEach((element, index) => {          data[index] = new body(element.x, element.y, element.phi);          data[index].setID(element.id);      });      //select all g elements and give them data based on id      let groups = d3.select("svg")        .selectAll("g")        .data(data, (d)=>d.id)        .attr("transform", d => d.setMatrix());  }  

It creates an array of class body objects, which are designed to contain and work with coordinates and ID of the element. Then I want to pass the data array to all the groups in SVG based on their id, but I haven't figured it out yet.

https://stackoverflow.com/questions/66808698/pass-d3-js-data-based-on-id-specified-in-data March 26, 2021 at 06:53AM