Блог

Текст выходит за пределы диаграммы. Идея в том, что если 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 amp;amp; i > 1500) {
            return -100;
          } else {
            return 10;
          }
        })
        .text(d => d.title)
    })
    .on("mouseout", function () {
      d3.select('.text')
        .remove();

    });
  

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

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

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

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