Текст d3 обрезан / выходит за пределы области диаграммы

Question

Текст выходит за пределы графика. Идея состоит в том, что если i больше 1500 и длина заголовка больше 5 символов, то текст смещается влево на 100 пикселей.

Что я делаю не так?

Codepen

Вот мой подход:

let rect = svg.selectAll('g')
    .data(combined)
    .enter()
    .append('g')
    .on('mouseover', function () {

      d3.select(this)
        .append('text')
        .attr('class', 'text')
        .attr('x', function (d) {
          return xScale(d.revenue);
        })
        .attr('y', function (d) {
          return yScale.bandwidth() + 175;
        })
        .style('font-size', 10)
        .attr('dy', -20)
        .attr('dx', function (d, i) {
          if (d.title.length > 5 && i > 1500) {
            return -100;
          } else {
            return 10;
          }
        })
        .text(d => d.title)
    })
    .on("mouseout", function () {
      d3.select('.text')
        .remove();

    });

Answer 1

i относится к индексу элементов выбора, так как у вас есть только один, i никогда не превышает 0.

Если вы хотите предотвратить обрезку текста, у вас должно быть условие вроде:

if (d3.select(this).attr("x") > 400)
...

или лучше, чтобы установить привязку текста на основе позиции для достижения этого.