-1

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")
DeanWinchester88
  • 109
  • 2
  • 9
  • 1
    looks like you need to make it wrap. E.g. https://stackoverflow.com/questions/24784302/wrapping-text-in-d3 – Robert Longson Sep 26 '21 at 09:53
  • i don't understand. i tried to apply – DeanWinchester88 Sep 26 '21 at 10:25
  • updated, its by the same link above. also. This way easier to see – DeanWinchester88 Sep 26 '21 at 11:32
  • https://codepen.io/askov/pen/qMdQZL?editors=0010 i see this guy did even easier. but still don't get it – DeanWinchester88 Sep 26 '21 at 11:47
  • there's no such thing as max-width in SVG. You have to do the word breaking manually as the answers to the other question show you. – Robert Longson Sep 26 '21 at 12:58
  • In your "this guy did even easier" reply you can easily see (SVG specification knowledge is a must!) that he just split each data cell name to words. And then these words get positioned using SVG TSPAN tag. That is the only way you can have your multiline text in SVG since there is no concept of line wrapping. Just copy that code part and replace your current and it should work the same. – Matt Sergej Rinc Sep 27 '21 at 07:46

1 Answers1

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

Matt Sergej Rinc
  • 565
  • 3
  • 11