BigFatDog/parcoords-es

How to make the header axis name on 2 lines

ilanl opened this issue · 1 comments

ilanl commented

My axis dimensions have long names,
Is there a way to make them appear on 2 lines nicely ?

My approach was creating a function which returns a text on 2 lines and than replace the html of the title. (something like:

const getSplittedString = (word, wordsPerLine) => {
  const split = word.split(" ");
  let i = 1;
  let html = `<tspan  x="0" dy="1.2em">${split[ 0 ]}`;
  if (!wordsPerLine) wordsPerLine = Math.ceil(split.length / 2);
  split.slice(1).map((s, index) => {
    i++;
    html = html + (
      index === split.length - 2 ?
        ` ${s}</tspan>`
        :
        (i % wordsPerLine == 0 ? ` ${s}</tspan><tspan  x="0" dy="1.2em">` : ` ${s}`))
  })

  return html;
}

)
I am calling this function for each title element and than replace the html, also update the transform property.

Is kind of a weird approach but it does the job.