javascript - d3 文本 chop/超出图表区域

Question

文字超出了图表范围。这个想法是，如果 i 大于 1500 并且 title length 大于 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。

如果你想防止 chop 文本，你应该有这样的条件:

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

或者更好的是，您可以根据位置设置文本 anchor 来实现这一点。