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

【问题标题】：How can I overcome the error: Property 'nodes' does not exist on type 'Selection<string[]>'?如何克服错误：“选择<string[]>”类型上不存在属性“节点”？
【发布时间】：2025-11-24 20:50:02
【问题描述】：

以下代码已根据为this earlier question 提供的有关如何排列图例条目的一些帮助进行了改编。它对我来说工作正常，除了最后一部分（应该隔开组的部分）。它在groups.nodes() 上窒息。

我收到错误消息：[ts] Property 'nodes' does not exist on type 'Selection<string[]>'.

我认为这可能是因为我使用的是 TypeScript。我也在使用 d3 v3.5.5。

知道如何进行这项工作吗？

        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)";
        })

【问题讨论】：

因为它是 TypeScript，所以丑陋的方式是 (<any>groups).nodes() - 我无法提供一个好的方式，因为我不知道整个故事，但它会将你的 Selection<string[]> 修改为更多内容适合组对象。
谢谢@mkaran。我尝试了您的修复，但它似乎不起作用。错误消失了，但元素没有移动。

标签： javascript typescript d3.js svg

【解决方案1】：

在@mkaran 和@Andrew Reid 的帮助下，回复this question，我找到了解决方案：

        // 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)";
        })

感谢@mkaran 和@Andrew Reid！

【讨论】：