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

Question

我有一个用 D3.js 创建的条形图。 x 轴上的值之一太长。我正在尝试添加 CSS 属性 text-overflow: ellipsis, width: 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 looooooooooooooooooooooong”只显示为“Longcat ...”

谢谢 ——高文

Answer 1

您需要在绘制文本之前剪切文本。

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

这是一个工作代码：http://jsbin.com/baxilo/edit?html,output

希望这会有所帮助:)