javascript - 将 hellip (...) 放入 d3.js 中 bar 内的文本

Question

我有一个图表，其中有条形图，如果文本不适合条形图，我现在正在这样做，然后直接从条形图上移开。

d3.selectAll('.c3-text')
      .each(function(d){
      var self = d3.select(this),
      width = +d3.select('.c3-zoom-rect').attr('width');
      if (+self.attr('x') + self.node().getComputedTextLength() > width){
      self.attr('x', '5');
      }
});

现在我想要文本，如果不适合栏，则添加省略号 (...) 并将文本剪切到栏的宽度。

当条形图非常小时，我需要省略文本并在屏幕的远端加上省略号。

非常感谢。

https://jsfiddle.net/e00vfofo/

Answer 1

对于较长的条使用样式或 css 'overflow:hidden;空白:nowrap；文本溢出:省略号；' - 这会自动 chop 并向溢出的文本添加省略号。

对于短条，像您已经做的那样取出文本，并将 … 添加到字符串的末尾。