Fit текст на SVG textpath

Я строю a chart с помощью D3.js, который показывает некоторую информацию о компетентности работникаFit текст на SVG textpath

, как вы можете видеть, какой-то текст больше, чем размер контейнера элемента, из-за того, часть текста , разрезают

Я попытался изменить текст размер шрифта динамически, но этот процесс не был очень успешным:/

теперь мой код выглядит следующим образом

.attr('font-size', function (d) { 
       var defaultSize = 14; 
       var angleForOneLetter = 1.14; // 
       console.log('angle=' + d.data.angle); 
       console.log('length=' + d.data.name.length); 
       console.log('str=' + d.data.name); 

      if (angleForOneLetter * d.data.name.length > d.data.angle) { 
       angleForOneLetter = d.data.angle/(d.data.name.length + 2); 
       console.log('letter angle=' + angleForOneLetter + '\n \n'); 

       if (angleForOneLetter > 0.8) return 10; 

       if (angleForOneLetter > 0.7) return 10; 
       if (angleForOneLetter > 0.5) return 8; 
       if (angleForOneLetter > 0.4) return 6; 
       if (angleForOneLetter > 0.3) return 5; 
       return 3; 
      } 
      console.log('letter angle=' + angleForOneLetter + '\n \n'); 
      return defaultSize; 

});

и он работает только случай, когда радиус диаграммы 580px;

Я хочу лучший способ достижения той же цели и приспосабливать текст к границам, когда радиус диаграммы изменяется

вы можете играть с кодом на codepen

источник

2016-05-10 bumbeishvili

Ваша конечная цель здесь просто масштабировать текст так, чтобы он всегда соответствовал его границам? Большая часть текста будет непрочитана - хотя бы маленькая, если это так, как вы идете. Вместо этого я бы сохранил весь текст того же размера и '...' те, которые переполняются. Затем я добавлю курсор мыши, чтобы показать полный текст. – Mark

Да, это один из вариантов, но мне все же хотелось бы знать, как масштабировать текст, чтобы соответствовать рамкам в моем случае. – bumbeishvili

@Mark, как я могу узнать, если текст переполняется? – bumbeishvili

Если вы не заботитесь о внешнем виде текста и просто хотите, чтобы заставить его, чтобы соответствовать, вы можете сделать это с:

... 
.style('font-size', 14) 
.each(function (d, i) { 
    var self = d3.select(this), 
    pathLen = d3.select("#outerArc" + i).node().getTotalLength(); 

    self.attr("textLength", pathLen) 
    self.attr("lengthAdjust", "spacingAndGlyphs"); 
    self.attr("y", "50%"); 
    self.attr("x", "50%"); 
    });

Обновлено codpen

источник

2016-05-11 13:07:43 Mark

ли вы попробовать что-то вроде:

.text(function (d) { 
    if (d.yourTextString.length > attrs.width/20) { 
     //use a specific size; 
    } 
    else if (d.yourTextString.length > attrs.width/40) { 
     //use another specific size; 
    } 
    else if (d.yourTextString.length > attrs.width/60) { ...

это легко можно использовать на любом графике, так как это зависит от размера диаграммы, то вы можете адаптировать/изменить/20/40/60, чтобы соответствовать вашим потребностям, вы можете использовать как 3 - 4 разных случая, и этого должно быть достаточно, если вам не нужно полностью заполнять диаграмму текстом. Я использовал что-то вроде этого несколько недель назад, работал на меня, не уверен, что этого достаточно.

источник

2016-05-10 14:36:09 kazu

Fit текст на SVG textpath

ответ

Смежные вопросы