search

d3plus / d3plus-text

A smart SVG text box with line wrapping and automatic font size scaling.
MIT License
105 stars 19 forks source link

enable truncation based on single long words and number of line restriction #91

Closed IPWright83 closed 6 years ago

IPWright83 commented 6 years ago

Added a maximum number of lines feature: closes #75 Resolved issues where no text was being displayed when a single word was too large: closes #76

Description

For https://github.com/d3plus/d3plus-text/issues/75 I've added an additional maxLines() option that can be changed on TextBox.js. This defaults to null which indicates there is no limit applied. When wrapping occurs this gets passed down into textWrap.js and is considered when it determines whether truncation needs to occur.

For https://github.com/d3plus/d3plus-text/issues/76 this was due to the word being too long to physically fit, therefore lineData was being set to an empty array yielding a blank result. I've modified this to call the ellipsis function and pass the result into a new textTruncate function. This will reduce the length of the original word and append ellipsis until it can successfully fit in the given width constraints. This does change the behavior for a single long word so have indicated as a breaking change.

Types of changes

Checklist

IPWright83 commented 6 years ago

@davelandry Thanks for your feedback. I'll look at making those changes.

One thing of note is that I'm struggling a little getting it working within our product at the moment (you might be able to help). I'm including via an npm install, and getting issues with all the d3 module imports being undefined.

Have you come across anything similar?

IPWright83 commented 6 years ago

@davelandry let me know if this is ok. If so be great if you have a chance to publish before Monday. Save me publishing my own internal version to use :)

davelandry commented 6 years ago

@IPWright83 just published this PR with a new release. thanks again!

what kind of errors are you getting with installing using npm?

davelandry commented 6 years ago

also, what type of environment are you installing it into?

IPWright83 commented 6 years ago

@davelandry I think I'm managed to fix my npm issues now fortunately. Took a bit of battling but we have our own d3 bundle (due to an old npm bug) and essentially I was getting 2 instances of d3.selection - which meant the prototype hadn't been extended to include .transition etc. All good now though :)

Glad to have helped, thanks for producing the library in the first place.

anatolyg commented 6 years ago

@IPWright83 can you publish the solution to your NPM troubles? We're having the same exact issue, also due to the extra addition of d3. Getting the selection prototype not having a transition function. Thank you!

IPWright83 commented 6 years ago

@anatolyg Took me a while to sort out, but I was getting the following structure (bearing in mind we have our own bundle of d3):

|node_modules
|---- companyx/d3
|---- d3plus-text
|-------- node_modules
|------------ d3-selection
|---- d3-selection

Note that the d3-selection was sometimes under companyx/d3 too and not d3plus-text. So in the package.json files I had:

companyx/d3 d3-selection: ^1.1.0

d3plus-text d3-selection: ^1.3.0

So while it should have been able to pull in just 1.3.0 or above, it didn't seem to be doing so. I deleted the packagelock.json a few times which didn't help much. In the end I upped the companyx/d3 version to d3-selection: ^1.3.0, also added d3-selection to my main package.json using ^1.3.0, ran a fresh npm install and an npm dedupe and that seemed to get rid of the extra references.