勾選未在 d3 條形圖中換行的文本/變量標簽
[英]Tick text/variable labels not wrapping in d3 bar chart
問題描述
我正在嘗試將換行應用於 d3 條形圖中沿 x 軸的長變量標簽。 這是我在 Observable 筆記本中的圖表： https : //observablehq.com/@unfpamaldives/figure4
我試圖應用 此塊中的解決方案，主要包括以下內容：
function wrap(text, width) {
text.each(function() {
var text = d3.select(this),
words = text.text().split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
y = text.attr("y"),
dy = parseFloat(text.attr("dy")),
tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em")
while (word = words.pop()) {
line.push(word)
tspan.text(line.join(" "))
if (tspan.node().getComputedTextLength() > width) {
line.pop()
tspan.text(line.join(" "))
line = [word]
tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", `${++lineNumber * lineHeight + dy}em`).text(word)
}
}
})
}
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${height})`)
.call(xAxis)
.selectAll(".tick text")
.call(wrap, x.bandwidth())
它的樣子：
我正在努力實現的目標： 我還嘗試將
wrap函數移到其他地方，在代碼的早期和后期，以及嘗試移動以下幾行
.selectAll(".tick text")
.call(wrap, x.bandwidth())
在此代碼塊中的某處工作，如下所示：
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.style("font-family", "HelveticaNeueLTStd-Cn")
.style("font-size", "9px")
.call(d3.axisBottom(x).tickSizeOuter(0))
.selectAll(".tick text")
.call(wrap, x.bandwidth())
但這也（試圖適應博斯托克的解決方案）不起作用。 （我之前已經在其他 d3 可視化中使用過文本換行，這是值得的。）任何人都可以演示基於我的 Observable notebook分支的工作解決方案嗎？
2 個解決方案
解決方案1
1 2020-02-26 20:12:55
我成功地為Gerardo Furtado 的本示例中的 x 軸條/變量標簽應用了文本換行技術。 它包含以下代碼：
svg.append("g")
.call(yAxis);
const axis = svg.append("g")
.call(xAxis);
setTimeout(()=>{
axis.selectAll(".tick text")
.style("font-family", "HelveticaNeueLTStd-Cn")
.style("font-size", "9px")
.call(wrap, x.bandwidth());
}, 0);
這是工作解決方案。
解決方案2
0 2020-02-27 00:39:46
已經在評論中暗示的wrap不起作用的原因是由於 Observable 的單元格的運行方式。 根據 Observable（和 D3）的創建者 Mike Bostock 的說法，
[這個問題] 在 Observable 中很常見，因為標准模式是將單元格實現為“純”函數，在其中創建分離的元素並返回它們，然后將它們插入到 DOM 中； 因此，在單元格內，您幾乎應該始終使用分離的元素。 （來源）
因此，當您調用tspan.node().getComputedTextLength()時，DOM 中還沒有任何內容，因此它返回零。
正如您所發現的，我的解決方案只是使用 0 毫秒的setTimeout ，因此當您需要測量元素時，這些元素將位於 DOM 中。 有人可能會爭辯說，這是 hacky，而且確實如此！ 順便說一句，博斯托克的解決方案，就是沿着這些路線......
const foo = html`<html structure here>`;
document.body.appendChild(foo);
//get the length of foo...
foo.remove();
......就像hacky，甚至可能更多。
如何在D3折線圖上擬合可變長度刻度標簽？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.