Javascript d3文本截断/超出图表区域

文本超出了图表的范围。如果i大于1500且标题长度大于5个字符，则文本向左移动100px

我做错了什么

我的做法如下：

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();

    });

---

i

引用选择元素的索引，因为您只有一个，

i

从不超过0

---

如果要防止截断文本，应满足以下条件：

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

---

或者最好根据位置设置文本锚定以实现此目的。

这是你的i>1500-这永远不会发生…如果你想防止切断文本，你应该有一个条件，如：If（d3.select（this.select）（this.attr（“x”）>400）或更好的条件，根据位置设置文本锚定以实现此目的感谢此功能，如果你给我一个答复，我会接受的