Tremap 中的 D3 適當的文本（）

Question

我是 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")

Answer 1

這是您根據我上面的評論修改后的代碼：

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 標記）來處理這個問題。 最好遵循並擴展您其他引用的代碼筆以使用可以簡化此任務的單元格。

除此之外，我剛剛更改了使用的調色板，您可以在此處查看顏色范圍：

https://github.com/d3/d3-scale-chromatic