D3 proper text() in tremap

Question

i'm new to d3. My problem is unreadable text. I suppose it's cuz i added text not to rect but to svg. How do i recode or fix this thing? 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

Here's your revised code based on my comment above:

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);

I've left the console.log command so that you can see how the (game) name is split into parts. And that Pac-Man is right but it's the only one game for the console category (2600) so it translates to thin black rectangle on top left (something you should consider how to solve it visually).

Then also SVG CSS attribute "overflow: hidden" won't work for your data cells with TSPAN. You would have to handle that with calculating this cell width and width of the current word(s) in a line (of TSPAN tag to add). It would be better to follow and expand your other referenced codepen to work with cells that would ease this task.

Other than that I've just changed the color palette used and you can see color ranges here:

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