BigFatDog / parcoords-es

ES6 module of Syntagmatic's Parallel Coordinates
MIT License
62 stars 32 forks source link

How to make the header axis name on 2 lines #84

Open ilanl opened 4 years ago

ilanl commented 4 years ago

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

berci-i commented 3 years ago

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.