长文本省略号

时间:2018-08-21 21:39:57

标签: javascript d3.js svg

我已经找到了一些示例,但是如果有人有一个更清晰的了解或一些见识,将很难工作,

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
})
);

1 个答案:

答案 0 :(得分:6)

无论您要做什么,您的方法都会遇到的问题是getComputedTextLength()虚构元素或未附加到元素的数据上不起作用...它仅适用于SVG上存在的真实SVG元素。

但是,由于您要将字符串数组传递到通常在元素渲染之前设置的[em]标尺范围内,所以在我看来,您想修剪长字符串

如果是正确的话,一种可能的方法是呈现一个临时元素,只是为了获取其计算出的文本长度,对其进行修剪,创建一个新字符串并丢弃该临时元素。

所以,假设我们有这个数据数组:

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 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