为D3.js创建的图形设置x轴上的样式值

Question

我有一个用D3.js创建的条形图。X轴上的某个值太长。我尝试添加CSS属性text-overflow:省略号，width: 10px和overflow: hidden，这样超过一定长度的值就会被缩写。看起来不太喜欢这样。我不能设置宽度。标签的。我尝试将它放在dev工具中的容器中，并将上面列出的属性应用到容器中，但也没有效果。代码如下：

<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 looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo...“

Thx --Gaweyne

Answer 1

你需要在图形化之前剪切你的文本。

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

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

希望这能有所帮助:)