树图中的 D3 正确文本（）

Question

我是 d3 的新手。我的问题是不可读的文本。我想这是因为我添加的文本不是矩形而是 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

树图中的 D3 正确文本（）

D3 proper text() in tremap

svg

text

treemap

d3.js