0

I have created an svg with d3 that contains 2 captions and 2 charts. For layout purpose I want to give each of the four groups a unique identifier.

Adding ids with function (d, i ) { return "svgCaption" + i;} returns in both cases svgCaption0

The ids should look like this: svgCaption0, svgCaption1, svgChart0, svgChart1

How can I achieve 4 identifiers for the groups?

Here is the code:

if (this.pieDatasets.length != undefined && this.pieDatasets.length > 0) {
            let outerSvg = d3.select("figure#pie")
            .append("svg")
            .attr("id", "outerSVG")
            .attr("width", "100%")
            .attr("height", "100%")

            let svgCaption = d3.select("#outerSVG")
            .append("g")
            .attr("id", function (d, i ) { return "svgCaption" + i;})
            .append("text")
            .style("font", "18px sans-serif")
            .attr("dy", "29px")
            .text(valueColumnLabels);
            
            let svgBox = d3.select("#outerSVG")
            .append("g")
            .attr("id", "svgBox")
            .attr("width", "100%")
            .attr("height", "100%");

            box.style.setProperty("width", "50%");

            var svg = d3.select("#svgBox")
            .append("g")
            .attr("id", 'svgChart')
            .attr("class", 'chart-font')
            .attr("viewBox", '0 0 ' + (width) + ' ' + (height))
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
Zehke
  • 129
  • 1
  • 1
  • 11
  • an HTML element can have only one ID https://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids/5685221 – moys Sep 29 '21 at 06:43
  • they will only have one ID, there are two of each generated and they need a unique ID, for me to do layouting – Zehke Sep 29 '21 at 06:48

0 Answers0