Question

我正在使用d3node在服务器上绘制图表。我有一个需要换行的功能。

wrapText(textArray, width) {
    textArray.each(function () {
        const text = d3.select(this);
        const words = text.text().split(/\s+/).reverse();
        const lineHeight = 1.1;
        const x = text.attr('x');
        const y = text.attr('y');
        const dy = 0;

        let word = '';
        let line = [];
        let lineNumber = 0;
        let tspan = text.text(null)
            .append('tspan')
            .attr('x', x)
            .attr('y', y)
            .attr('dy', `${dy + lineHeight * (lineNumber += 1)}em`);
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(' '));

            if (tspan.node().getComputedTextLength() > width) {
                line.pop();
                tspan.text(line.join(' '));
                line = [word];
                tspan = text.append('tspan')
                    .attr('x', x)
                    .attr('y', y)
                    .attr('dy', `${dy + lineHeight * (lineNumber += 1)}em`)
                    .text(word);
            }
        }
    });
},

当我console.log d3.select（this）;我得到HTMLUnknownElement和一堆属性。现在，当涉及到tspan.node（）。getComputedTextLength（）时，它将失败，而getComputedTextLength（）不是一个函数。

作为cdallig包装功能的代码是这个

       comment
            .append('text')
            .attr('class', 'comment-text')
            .attr('fill', '#000')
            .attr('transform', 'rotate(-90)')
            .text(text)
            .style('font-family', "'Roboto','Open Sans', sans-serif")
            .call(this.wrapText, this.height - 100);'

同一件事在这里发生：

    comment
            .select('.comment-text')
            .selectAll('tspan')
            .each(function calculateTextSize() {
                if (this.getComputedTextLength() > textHeight) {
                    textHeight = this.getComputedTextLength();
                }
            });

此代码在客户端上可以正常运行，问题出在D3node上。有没有人有同样的问题。任何帮助表示赞赏。

Answer 1

当使用 React 时，这对我有用：

describe("your test suite", () => {
  const originalGetComputedTextLength =
    SVGElement.prototype.getComputedTextLength
  beforeEach(
    () =>
      (SVGElement.prototype.getComputedTextLength = () => {
        return 150
      })
  )
  afterEach(
    () =>
      (SVGElement.prototype.getComputedTextLength = originalGetComputedTextLength)
  )

  it("your test case", async () => {
    ...

D3Node getComputedTextLength（）不是函数

1 个答案: