javascript - 长文本的省略号
问题描述
我已经找到了一些例子,但是很难让任何一个工作,如果有人有更清晰或一些洞察力,将不胜感激。
var wrap = function() {
var self = d3.select(this),
textLength = self.node().getComputedTextLength(),
text = self.text();
while (textLength > (50) && text.length > 0) {
text = text.slice(0, -1);
self.text(text + '...');
textLength = self.node().getComputedTextLength();
}
};
const y = d3.scaleBand()
.range([height, 0], .1)
.domain(data.map(function (d) {
return d.name; <----- wrap need to somehow attach to this
})
);
解决方案
无论您尝试做什么,您的方法的问题在于getComputedTextLength()
它不适用于虚构元素或未附加到元素的数据......它仅适用于真实的 SVG 元素,存在于 SVG 上。
但是,由于您想将该字符串数组传递给我们通常在渲染元素之前设置的带刻度域,因此在我看来,您希望事先修剪长字符串。
如果这是正确的,一种可能的方法是渲染一个临时元素,只是为了得到它的计算文本长度,修剪它,创建一个新字符串并丢弃临时元素。
所以,假设我们有这个数据数组:
var data = ["A very long long long text here",
"another very very long piece of text in this string",
"finally, here we have another very big string"
];
我们可以使用您的 wrap 函数的修改版本来修剪字符串。这是一个演示,检查控制台:
var data = ["A very long long long text here",
"another very very long piece of text in this string",
"finally, here we have another very big string"
];
var svg = d3.select("svg");
data.forEach(wrap);
function wrap(d, i, arr) {
var self = svg.append("text")
.text(d);
var textLength = self.node().getComputedTextLength();
while (textLength > 50 && d.length > 0) {
arr[i] = arr[i].slice(0, -1);
self.text(arr[i] + '...');
textLength = self.node().getComputedTextLength();
}
arr[i] += "...";
self.remove();
}
console.log(data)
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
由于它使用真实元素,因此字体大小等内容很重要。例如,将上面的结果与下面的结果进行比较,使用另一种字体和字体大小:
var data = ["A very long long long text here",
"another very very long piece of text in this string",
"finally, here we have another very big string"
];
var svg = d3.select("svg");
data.forEach(wrap);
function wrap(d, i, arr) {
var self = svg.append("text")
.text(d);
var textLength = self.node().getComputedTextLength();
while (textLength > 50 && d.length > 0) {
arr[i] = arr[i].slice(0, -1);
self.text(arr[i] + '...');
textLength = self.node().getComputedTextLength();
}
arr[i] += "...";
self.remove();
}
console.log(data)
text {
font-size: 8px;
font-family: "Arial Narrow";
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>
但是,请记住,这getComputedTextLength()
显然忽略了类似的内容letter-spacing
,如您在此处看到的:Compute textlength with letter-spacing with D3.js
推荐阅读
- python - python Discord BOT 中的 Pillow 库无法识别 .paste 和 .save 函数
- dynamic - SendGrid 中动态模板的替换标签
- javascript - 单击按钮时如何显示数据
- asp.net - Asp net core 和 Firebase 身份验证
- javascript - 函数内的Javascript函数堆叠先前的返回值
- json - 我可以在groovy中生成json文件时传递一个变量吗
- python - 字典更新 - 非常奇怪的行为
- git - vs代码不加载新分支,远程终端可以
- spring-boot - Spring Security:匿名和登录用户可访问的页面上的 null Principal
- php - 我怎样才能显示我的子类别与父母和孩子的关系