wrapping labels in zoomable sunburst

[virtualgadjo]

Hi,
first of all, thanks a lot for this incredible job that has saved me a huge amount of time...
i'm wondering if you had an idea of how to wrap the label text in th zoomable sunburst, i've tried many things among which

label.each(function(d) {
  let text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        x = text.attr("x"),
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
  while (word = words.pop()) {
    line.push(word);
    tspan.text(line.join(" "));
    if (tspan.node().getComputedTextLength() > 150) {
      line.pop();
      tspan.text(line.join(" "));
      line = [word];
      tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
    }
  }
});

like this or chained with .text(d => d.data.name) but with no error and... no effect :D
and as i know the former textwrap function is made for d3 v4 and doesn't work in d3 v7, any idea/suggestion would be very welcome :)

have a nice day

[takanori-fujiwara]

Hi,
Thank you for checking this repository!

I implemented a text-wrapping example today (as I also felt this is an important function to demonstrate). Check "additional_examples/zoomable-sunburst-with-textwrap". I hope this is good for you.

More technical comments:

• When using CSS+HTML (but, in our case, using SVG), text wrapping can be done very easily: Just use CSS's inline-size.
• However, inline-size cannot be used in SVG1.1. SVG2 will support this function (https://www.w3.org/TR/SVG2/text.html). But, unfortunately, we don't know when we can start using SVG2. I am really looking forward to SVG2 support as it can solve other problems (e.g., z-index based drawing)
• So, what we can do is manually separating a text into several blocks and put each of them into (as you tried).

Have a nice day.

[virtualgadjo]

Hi,
wow, thank you so much, this is absolutely incredible and is exactly what i was trying to do

adapting the previous code i wrote in my message, i ended wrapping the text into parts but the result would have you burst into laughters, every part started at the end of the former one, it looked like a hedgehog with stairs like thorns :D
even worse, where i was, it only happened after the first click on a level

very interesting what you are saying about css as, adapting your code not to append the full svg into a div but selecting the svg tag already in the html, i could target the path title tags and apply css from the css file but, unfortunately, the result was visually exatly the same as my poor attempt inside the js code except that it was immediatly visible
let's dream about when SVG2 lets us use css the normal way and understand it like any other html element, it will allow us great things

now i'll just have to see if i can manage to implement something like if a step is made of only one element (a full circle instead of two or more segments) due to the data structure, i'll try to have the label horizontal instead of vertical as it will make it a little more human readbale, sure this will be fun to think about :)
maybe this time a css transform back at the end of the tra,sition if not no transform in js if the element has no sibling(s) (count children = 1)

i can't thank you enough for this great piece of code!!!

have a nice day
(edited because of my poor spelling... :))

[takanori-fujiwara]

Hi,

You're welcome :)

One important/difficult part of D3 is to know which element is selected when returning it to a variable. I think this is related to your problem (only you can see the text for the first level). As D3 Gallery's source code refers to 'label' variable when clicking, we need to make sure 'label' is a set of 'text' elements. That is the reason why this new version of my code (around line 134-163) is slightly different from the original version.

Your current try is interesting. Enjoy your coding!

[virtualgadjo]

Hi,
you're right, D3 can be "a little" confusing sometimes
i even tried targetting title var/tag with my previous attempt but with no more success... reading your code, i understand why now! :D

you've made your last code so easy to configure, i couldn't help playing with options, adding two of them in the main js file to end with a really readable result on big screens

i've also added the fact that like the non zoomable sunbust, it can use a json without values/sizes and it works like charm
i've used this little snippet from the original sunburst

const partition = data => {
  const root = d3.hierarchy(data)
    .sum(function (d) {
      if (d.children) {
        return 0
      } else {
        return 1
      }
    });
  return d3.partition()
    .size([2 * Math.PI, root.height + 1])
    (root);
}

a guy who has seen my little attempts and what it looks like now thanks to you may want to use it in his website with some other functionalities
if this were the case and you are ok with it i may get back to you but for a real job this time, enough playing just for fun... :)

again, thank you so much!

have a nice day

[takanori-fujiwara]

Yes, I think your way has more generalizability to any nested JSON files.

And, sure! I am okay with it.

Have a nice day.

[virtualgadjo]

Hi,

i'm waiting for the potrntiel client functionalities to implement (even if honestly i think this would not really be the right tool for what he is thinking, far too many levels in the JSON/sunburst to reach the final data users are looking for...)

meanwhile, about this horizontal label if there is only one segment in a cricle, a full circle actually, as d3, curiously enough, doesn't have a count siblings function, many console logs (and as many failures :)) later, i've ended with this simple and savage modification...

const labelTransform = d => {
  const x = (d.x0 + d.x1) / 2 * 180 / Math.PI;
  const y = (d.y0 + d.y1) / 2 * radius;

  if ( d.x0 - d.x1 < -6 ) {
    return `rotate(${x - 180}) translate(${y},0)`;
  }
  else {
    return `rotate(${x - 90}) translate(${y},0) rotate(${x < 180 ? 0 : 180})`;
  }
}

and funny as it may seem it works and seems solid whatever width i set to the full svg

i thought that due to your precious halp i had to show you this :)

have a nice day

[virtualgadjo]

Hi,
forgot to say but i'm sure you had guessed that d3 inner calculation being precise enough, this
if ( d.x0 - d.x1 == -(2 * Math.PI) )
seems to work consistantly and has a better 'look" :)

have a nice day

[takanori-fujiwara]

Hi,
Thank you for sharing your code!
Yes, this makes sense: controlling based on the start and end angles.