d3文字被截断/超出图表区域

Question

文本超出了图表。这个想法是，如果 i 大于1500，并且标题长度大于5个字符，则文本将向左移动100px。

我在做什么错了？

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)
...

或者更好的是，根据位置来设置文本锚。