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