How do I append multiple x3d elements in javascript via loop? Seems like x3d can be appended successfully, but the elements below it only show up for the first x3d. Thank you for the help in advance!
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://x3dom.org/download/dev/x3dom-full.js"></script>
<script src="d3.v5.min.js"></script>
<script src="d3-x3dom-axis.min.js"></script>
<link rel="stylesheet" href="https://x3dom.org/download/dev/x3dom.css" />
</head>
<body>
<script>
var width = 800, height = 400;
var years= ['2017','2018','2019','2020','2021','2022'];
var clusters= [3,4,5,6,7,8,9,10];
for(year of years){
for(cluster of clusters){
id = year+'-'+cluster
var x3d = d3.select("body").append("x3d")
.attr('id',id)
.attr("width", width + 'px')
.attr("height", height +'px' )
}
}
</script>
</body>
