Question

我正在尝试确定动态调整大小的d3元素的大小。我见过.getBBox()的例子，就像这个例子一样 - D3.js: How to get the computed width and height for an arbitrary element? - 说使用selection.node().getBBox()。但是当我尝试使用它时，我收到一个错误：[ts] Property 'getBBox' does not exist on type 'Node'.

我假设（可能不正确）我应该用我的元素名称替换“选择”？所以在我的情况下，我将selection.node().getBBox()更改为legend.node().getBBox()。

我认为错误可能是TypeScript独有的东西，而不是我在JavaScript中看到的东西，也许？（或许不是。）

那么如何使用TypeScript测量元素的宽度？

这是我的代码部分，其中包含目前的图例：

        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', 900).attr('height', 500); 

        var legend = this.svg.append('g')
            .attr("class", "legend")
            .attr("height", 0)
            .attr("width", 0)
            .attr('transform', 'translate(' + width * 0.5 + ',10)'); 

        var legendRect = legend
            .selectAll('g')
            .data(legendData);

        var legendRectE = legendRect.enter()
            .append("g")
            .attr("transform", function (d, i) {
                return 'translate(' + ((i * 80) + 0) + ', ' + 10 + ' )';  // y is constant  and x growing symbols
            });

        legendRectE
            .append('path')
            .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')
            ;

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

如何确定不是文本元素的动态大小的d3元素的宽度？

0 个答案: