Home

API:

• TextWriter - writer for specific d3.selection
  • dynamic textDirection
  • dynamic maxLines
• TextMeasurer - measurer for specific d3.selection or general one
  • dynamic measureType - measureByCharacter/measureByEntireString
  • dynamic way of handling whitespaces - withoutChange/asOneSpace
  • applyCssClass(cl: string) - applying specific css class for corresponding d3.selection
  • removeCssClass(cl: string) - removing if exists specific css class from d3.selection
  • `calculateDimension(text: string): Dimensions
• CacheTextMeasurer extends TextMeasurer
  • cache dimension of each character

Feature requests:

• multi-line wrapping text with ellipsis
• multi-local support (bi-directional)
• accepting different than <text> nodes
• provide an endpoint to measure text without specifying any d3.selection - one measurer across whole library

Dependencies:

• d3.js

Existing libraries:

• svg.textwap.js - This is a plugin for the svg.js library to do a best possible wrap on the SVG.Text element's specified width.
  • it is built on top of svg.js
  • wrapping text to fit just the width
• d3-measure-text - A JavaScript component on top of d3.js to measure the the width and height of SVG text.
  • just measurer
  • var dim = d3MeasureText("Time (days)", "css_class_name");
  • it creates new svg element and apply css_class_name to text element
• svg.textflow.js - A plugin for the svgjs.com library to create auto-wrapping text flow elements in svg.
  • it is built on top of svg.js
  • var flow = draw.textflow('Some long text \n\n necessary for the context.').size(300,200)
  • setting dynamically text attributes - flow.font({ family: 'Georgia, serif', size: 36 })
  • var overflow = flow.data('overflow') - getting original data (before wrapping)
• d3textwrap - Painless cross-browser line wrapping for text passages in SVG projects built with D3.js
  • d3.select('text#wrapme').textwrap(bounds);
  • for non IE browsers it's converting to foreignObject <- preferable
  • for non Safari browsers it's converting to tsspan trying to fit as much as he can within width