Блог

Я пытаюсь изменить размер моей диаграммы на основе моих текстов axis, используя d3.js на узловом сервере. Но я получаю некоторые ошибки и возможные значения, это список попыток получить размеры оси для правильной установки внутренней высоты:

 With: getBoundingClientRect()
Code: g.select('.axis-content').node()?.getBoundingClientRect()
Result: { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }
  

 With: getComputedTextLength()
Code: g.select('.axis-content').node()?.getComputedTextLength()
Result: getComputedTextLength() is not a function
  

 With: preserveAspectRatio and viewbox
Result: No effect
  

Я думаю, что мне нужно динамически устанавливать нижнее поле, добавляя к нему высоту оси X, потому что текст может меняться в зависимости от названия страны.

Итак, как я могу решить эту проблему и изменить размер моей диаграммы на основе текста галочки? Мне кажется, что xAxis создан, но не имеет ширины или высоты, и только когда я запускаю режим проверки в Google Chrome, появляются эти значения, но они не в элементе.

Мой код находится здесь: Github Gist — chart.ts

Это моя диаграмма в обычном / измененном размере:

Вот тема, в которой обсуждается это.

Похоже, вы могли бы добиться этого с помощью этой функции:

 const p = document.createElement('p')

    p.getBoundingClientRect = jest.fn(() => ({
      x: 851.671875,
      y: 200.046875,
      width: 8.34375,
      height: 17,
      top: 967.046875,
      right: 860.015625,
      bottom: 984.046875,
      left: 851.671875,
    }))
  

Я сталкивался с этим перед использованием DocumentFragment. Другой возможный обходной путь заключается в том, что вы могли бы оценить размер на основе количества символов в тексте и, возможно, рассмотреть возможность использования шрифта фиксированной ширины для повышения точности.