我该如何克服错误：“选择”类型上不存在“节点”属性 <string[]> “？

Question

The following code was adapted with some help provided for this earlier question about how to arrange legend entries. It is working fine for me, except for the last part (the part that should space out the groups). It chokes on the groups.nodes() .

I'm getting the error: [ts] Property 'nodes' does not exist on type 'Selection<string[]>'.

I think this may be happening because I'm using TypeScript. I'm also using d3 v3.5.5.

Any idea how to make this work?

        var legendData = [["OA", "yellow", "circle"], ["OI", "blue", "cross"], ["RARC", "green", "diamond"], ["CAPE", "red", "square"], ["Other", "black", "triangle-down"]];

        this.svg.selectAll('.legend').remove() //remove remnants of previous legend so new legend has clean slate...eliminates overlays during resizing

        var svg = d3.select('svg')
            .append('svg').
            attr('width', 800)
            .attr('height', 200);

        var groups = svg.selectAll('g')
            .data(legendData)
            .enter()
            .append('g')
            .attr("class", "legend");

        var symb = groups.append('path')
            .attr('transform', 'translate ( 15 , 15 )')
            .attr("d", d3.svg.symbol().type((d) => {
                return d[2]
            }
            ).size((d3.min([height, width]) * ScatterChart.Config.axisFontMultiplier) * (d3.min([height, width]) * ScatterChart.Config.symbolSizeMultiplier)))
            .style("fill", function (d) {
                return d[1];
            })
            .attr('stroke', 'black')
            ;

        var text = groups.append('text')
            .attr('y', 20)
            .attr('x', 30)
            .text(function (d) { return d[0]; })
            .style('font-size', function () { return d3.min([height, width]) * ScatterChart.Config.axisFontMultiplier + "px" })
            ;

        // Now space the groups out after they have been appended:
        var padding = 10;
        groups.attr('transform', function (d, i) {
            return "translate(" + (d3.sum(legendData, function (e, j) {
                if (j < i) { return groups.nodes()[j].getBBox().width; } else return 0;
            }) + padding * i) + ",0)";
        })

Answer 1

With help from @mkaran and @Andrew Reid, responding to this question , I got to a solution:

        // Now space the groups out after they have been appended:
        var padding = 10;
        groups.attr('transform', function (d, i) {
            return "translate(" + (d3.sum(legendData, function (e, j) {
                if (j < i) { return (<any>groups)[0][j].getBBox().width; } else return 0;
            }) + padding * i) + ",0)";
        })

Thanks @mkaran and @Andrew Reid!