我是 d3 的新手。我的問題是無法閱讀的文本。我想這是因為我添加的文本不是 rect 而是 svg。我如何重新編碼或修復這個東西？ https://codepen.io/DeanWinchester88/pen/xxrjLrM
svg
.selectAll("text")
.data(root.leaves())
.enter()
.append("text")
.attr("x", (d) => d.x0 10)
.attr("y", (d) => d.y0 20)
.text( (d) => d.data.name)
.attr("font-size", "12px")
.attr("fill","white")
.attr("overflow", "hidden")
.attr("max-width", (d) => d.x1 - d.x0)
tspan = text.text(null)
.append("tspan")
.attr("x", x)
.attr("y", y)
.attr("dy", dy "em")
uj5u.com熱心網友回復：
這是根據我上面的評論修改后的代碼：
https://codepen.io/mattsrinc/pen/MWozBWQ
svg
.selectAll("text")
.data(root.leaves())
.enter()
.append("text")
.attr('transform', d => 'translate(' d.x0 ',' d.y0 ')')
.selectAll('tspan')
.data(d => d.data.name.split(/(?=[A-Z][^A-Z])/g))
.enter()
.append('tspan')
.attr('font-size', '0.8em')
.attr('fill', 'white')
.attr('x', function(d) { console.log(d); return '0.5em' })
.attr('y', (d, i) => 12 * (i 1))
.text(d => d);
我已經離開了 console.log 命令，以便您可以看到（游戲）名稱是如何拆分的。那個吃豆人是對的，但它是控制臺類別 (2600) 的唯一一款游戲，因此它會轉化為左上角的黑色細矩形（您應該考慮如何從視覺上解決它）。
然后，SVG CSS 屬性“溢位：隱藏”也不適用于具有 TSPAN 的資料單元格。您必須通過計算此單元格寬度和一行（要添加的 TSPAN 標記）中當前單詞的寬度來處理該問題。最好遵循并擴展您其他參考的 codepen 以使用可以簡化此任務的單元格。
除此之外，我剛剛更改了使用的調色板，您可以在此處查看顏色范圍：
https://github.com/d3/d3-scale-chromatic
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326035.html