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

我用D3.js创建了一个条形图。x轴上的一个值太长。我正在尝试添加CSS属性text-overflow:ellission、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>

长尾猫很笨

我注意到在创建条形图时，添加了内联样式文本anchor:end。我看到了它的作用，将值名称整齐地放在轴刻度旁边。但是如何设置这个文本标记的样式，例如“Longcat is looooooooooong”只显示为“Longcat…”

Thx

---

--Gaweyne

在绘制文本图表之前，您需要先剪切文本

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

下面是一个工作代码：

---

希望这有帮助：）

您不能在SVG中使用，您必须自己进行截断，或者使用类似“谢谢您的确认”的方法。我考虑过这样做。但这些都是动态创建的图形，可能涉及到很多微妙的事情。但是如果没有别的办法，我想我可以试试。没有CSS解决方案吗？编辑：哦，拉尔斯证实了以上。无法在SVG中执行此操作。