Question

我有一个用D3.js创建的条形图。 x轴上的一个值太长。我正在尝试添加CSS属性text-overflow：省略号，宽度：10px和overflow：hidden，因此超出一定长度的值将被缩写。虽然似乎不喜欢这样。我无法设置宽度。的标签。我尝试将它放在开发工具的容器中，并将上面列出的属性应用到容器中，但也没有用。这是代码：

<g class="tick" transform="translate(0, 10)" style="opacity: 1;">
  <line x2="-6" y2="0">
  <text x="-9" y="0" dy=".32em" style="text-anchor: end;">Longcat is looooooooooooooooooooooooooooong</text>
</g>

我注意到创建条形图时，添加了内联样式text-anchor：end。我看到了这一点，将值名称整齐地放在轴刻度线旁边。但是我如何设置这个文本标签的样式，例如“Longcat is looooooooooooooooooooong”只显示为“Longcat ......”

THX --Gaweyne

Answer 1

您需要在图表之前剪切文字。

d.name = (d.name.length > 7 ) ? d.name.substring(0, 7) + "..." : d.name;

这是一个有效的代码：http://jsbin.com/baxilo/edit?html,output

希望这会有所帮助：）

在D轴上为D3.js创建图形的样式值

1 个答案: