我正在使用D3.js
. 我想找到一个与这个 CSS 类等效的 SVG,如果文本从其包含的 div 流出,它会添加省略号:
.ai-ellipsis {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>);
}
这是我的 SVG:
<g class="bar" transform="translate(0,39)">
<text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>
<rect height="13" width="123"></rect>
</g>
它的生成如下:
barEnter.append("text").attr("class", "label")
.attr("x", -3).attr("y", function() { return y.rangeBand() / 2})
.attr("dy", ".35em").attr("text-anchor", "start")
.text(function(d) {
return d.Name;
});
目前,文本溢出并与 rect 元素重叠。
有什么办法可以说“如果文本超过一定宽度,裁剪它并添加椭圆”?