将hellip（...）放在d3.js中的bar内部的文本 [英] put hellip (...) to a text that is inside of bar in d3.js

问题描述

我有一个图表，其中有酒吧，目前正在做的，如果文本不适合在酒吧，然后就在酒吧。

I have a chart in which there are bars and am currently doing that if the text does not fit on the bar, then right out of the bar.

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');
      }
});

现在我想要的文本，如果不适合在酒吧，添加省略号

Now I want the text if not fit on the bar, are added ellipsis (...) and the text is cut to the width of the bar.

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

when the bar is very small, I need the text left out and also with ellipsis far end of the screen.

非常感谢。

https://jsfiddle.net/e00vfofo/

推荐答案

对于较长的条形，使用style或css'overflow：hidden; white-space：nowrap;

For longer bars use style or css 'overflow:hidden; white-space:nowrap; text-overflow:ellipsis;' - this automatically truncates and adds ellipsis to text that overflows.

对于短柱，将文本输出为您已经做的，并添加& hellip; 到字符串的结尾。

For short bars take the text out as you are doing already and add … to the end of the string.

这篇关于将hellip（...）放在d3.js中的bar内部的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！