example: https://groups.google.com/forum/#!topic/d3plus/7Wmagn8s5Uo

https://groups.google.com/forum/#!topic/d3plus/1E-mwOEepEM

Expected Behavior

When setting fontResize(true), the line-height should respect the difference between the default fontSize and the lineHeight value.

Current Behavior

Currently, it seems to be statically set.

Steps to Reproduce (for bugs)

https://jsfiddle.net/pemwzcc3/1/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

Expected Behavior

It appears that text that does not need to wrap lines is being given the font size of a previous TextBox.

Current Behavior

Steps to Reproduce (for bugs)

http://jsfiddle.net/cjk1g1kr/8/ takes a min to load all the data I'm throwing at it.

Your Environment

Chrome, W 7 Pro

It could very possibly be my code. But I'd appreciate any insight and ideas for a workaround.
Thanks

this is the font installed on travis-ci, and should be used for all font measuring test functions

The current version of text wrapping in D3Plus v1 will extract x, y, width, and height from a shape placed adjacent to the text (either a <rect> or a <circle>).

One of our goals with these new modules is to sort of "demystify" a lot of the magic that happens behind the scenes to allow better control over all aspects of the functions. That being said, this is a killer feature that should be migrated over.

My initial thought is to have the .select( ) method also support being passed a shape instead of a container, and in that case, extrapolate the values from that shape and insert the new text element immediately after it in the DOM. Shouldn't be too hard.

I think that this can also be coded in a way so that if the shape's properties change, the text will re-wrap if called again.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Your Environment

• Browser Name:
• Operating System and Version:

Doesn't work for long text.

If .shape( ) is given an SVG <path>, the innerBounds should be detected automatically using the d3plus.geom.largestRect function.

I am currently using d3plus-text library for text wrapping and dynamic font-size rendering. But somehow it is not getting affected in the chart.

I have the following piece of code:
var paths = markets.append("text")
.text(function(d) { return d.market + ": " + n(d.value);})

              .attr("x",0)
              .attr("y", function(d) { return y(d.offset / d.parent.sum)+20; })
              .each(function(d){
            	  d3plusText.TextBox().select(d3.select(this)).fontsize([8,20])render();
              }) ;

Please suggest how to append a textbox layer using d3plus-text inside d3.js.

In the same way that text-wraps but could truncate with an ellipsis, it would be good to have a maximum number of lines limit too, because even with wrapping sometimes the content is too long.

Instead of:

Producing:

I'm thinking of having a truncateLines(n) or similar function on the configuration.

Is this within the scope of the library? something I thought would be useful.

Here is an example use case:

1. text string to split of string 1\nstring 2
2. string 1 & string 2 will have separate tspan elements regardless of it they fit on the same line (ellipsis would still show if it overflows too far):

Result:

---------------
string 1
string 2
---------------

NOT

---------------
string 1 string
 2
---------------

Hello,

I am trying to make d3plus-text work with my circle packing (d3 v4) but I do not understand how to integrate it. Can you please help me understand how it works so that my texts are wrapped in their container.

Thank you

Actually :

  var text = g.selectAll("text")
    .data(nodes)
    .enter().append("text")
      .attr("class", "label")
      .attr('dy', '.35em')
      .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
      .style("display", function(d) { return d.parent === root ? "inline" : "none"; })
      .text(function(d) { 
            return d.data.name; 
        })
    ;

once implemented, can remove the redundancy in d3plus-legend

Version 1.0.5 of d3-selection just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-selection is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Expected Behavior

When rotating a TextBox, setting the verticalAlign should respect the rotation.

Current Behavior

Currently, it just moves the label down vertically.

Steps to Reproduce (for bugs)

https://jsfiddle.net/5hafqu6b/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

Expected Behavior

When you call .font('my custom font') and that font is defined in a @font-face rule in css. Then the font should be downloaded and used.

Current Behavior

When you call .font('my custom font') and that font is defined in a @font-face rule in the css. Then provided some the browser has already finished downloading the font, it works correctly. If however that font is not yet available then the font is blacklisted for the duration of page. (I am writing a SPA so this could be a very long time.)

Steps to Reproduce (for bugs)

1. Add this css @font-face { font-family: 'X-Custom'; src: url(http://fonts.gstatic.com/s/dancingscript/v9/If2RXTr6YS-zF4S-kcSWSVi_szLgiuQHiC4W.ttf) ; }
2. Create a text box as usual including .font('X-Custom')
3. Note that the font is not used.
4. Now add a

   Sample

   to the page
5. Create the SVG text on page load and note that the font does not get used.
6. Delay the SVG text until the font is loaded and note that it does work.

Expected Behavior

Spaces from the beginning and end of strings should be stripped before processing.

Current Behavior

If a phrase starts with a space, then all of the words appear as one (no spaces).

Steps to Reproduce (for bugs)

http://jsfiddle.net/gest45z9/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

Version 0.4.11 of d3plus-dev just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-dev is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 1.0.4 of d3-transition just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-transition is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Expected Behavior

Based on logic previously implemented by @IPWright83 here and the discussion here, users should be able to set .truncateWord(true) to enable truncating a string in the middle of a word.

Current Behavior

The current default behavior is to always show whole words.

I got another issue with the long text rendering, the rendering text is: "建立客户信息反馈机制，跟踪解决过程，问题解决率达到80%以上", when run with TextBox().overflow(true), throwing the following error:

d3plus-text.js:210 Uncaught TypeError: Cannot read property 'trimRight' of undefined

if use with .overflow(false), the output only includes '...'
I'm using the version 0.9.8

further test shows the issue is related to Chinese symbols, such as '，' in the above sentance

For hiding whether or not certain texts should be read by screen-readers, it would be great to have a ariaHidden method.

Version 1.0.3 of d3-array just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-array is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

With the font resizing on, if there isn't enough space instead of adding ellipsis on it simply doesn't add any text.

Expected Behavior

Ellipsis if there isn't space for the text. In this provided example I would expect the last 3 characters that can be rendered to be missed off ABCDEFGHIJKLMNOPQRSTUVWXY...

Current Behavior

No text is added to the DOM

Steps to Reproduce (for bugs)

https://jsfiddle.net/IPWright83/uscw0Lh6/1/

I'm using the following where radius = 150 and I'm using 2 strings:
ABCDEFGHIJKLMNOPQRSTUVWXYZ12 and ABCDEFGHIJKLMNOPQRSTUVWXYZ123

new d3plus.TextBox()
    .data([d])
    .select(elements[i])
    .fontResize(true)
    .height(radius)
    .width(radius)
    .text(d => d.name)
    .x(d => -radius / 2)
    .y(d => -radius / 2)
    .ellipsis((text, line) => line ? text.replace(/\.|,$/g, "") + "..." : "")
    .verticalAlign("middle")
    .textAnchor("middle")
    .render();  
  });

Not working on IE11 + Arabic
http://codepen.io/ajdija/pen/ryoxqe

Need to detect if variable is a string: https://github.com/d3plus/d3plus-text/blob/master/src/box.js#L39

Thank you so much for this awesome library!
Without TextBox I would have wasted several days :)
I was a bit confused when I used TextBox with Japanese text,
as the wrapping function seemed to be broken against it.
After looking into the source for a moment, I found the reason:
Japanese too should be included in noSpaceRange variable in src/textSplit.js !

Typical Japanese texts like "日本語は基本的にはスペースを含みません" have no space inside them!
See e.g., Japanese Wikipedia article like https://ja.wikipedia.org/wiki/JavaScript.

Expected Behavior

Using an accessor with the rotate method, I would expect to be receiving my raw data object back as the first argument.

Current Behavior

It's currently returning the internal d3plus data element.

Steps to Reproduce (for bugs)

https://jsfiddle.net/5hafqu6b/1/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

Version 0.6.15 of d3plus-common just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-common is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

title self explanatory. trims should be replaced with a cross-platform alternative, unless you have no plans to support IE

@jspeis commented on Wed Jan 11 2017

Just noticed this, not sure if I messed up a configuration or something bug thought I would file this in case anyone else encountered a similar issue?

http://codepen.io/jspeis/pen/RKrmPM

Notice that there is a double space " " after the words "DOUBLE SPACE". If I delete the double space in the title then the spacing in the over words ("Latest Available Data") looks right.

Hey!

I'm trying to swap my code from using the text-wrapping utility in d3plus to this module, but I'm struggling to understand how I'm supposed to use it. I'd be happy to contribute some docs once I get my head around it.

My current code has some circular nodes which have data associated with them. This is how I insert the labels:

nodeData
    .append('text')
    .text(function(node) {
        return node.name;
    })
    .each(function() {
        d3plus.textwrap()
            .container(d3.select(this))
            .shape('circle')
            .draw();
    });

How would I convert this to using d3plus-text? I have managed to get the box method to insert tspans into the page based on the data I give it (by passing through the full node data array at once), but I want to wrap text that is associated with individual nodes on my page (the nodeData array).

Thanks in advance,

Helen

I couldn't find a place in Textbox function to set the font weight property.

Thank you for making this a standalone module. It took me some time to figure out the new API so perhaps I am missing something.

What I am seeing is that if a word is too long for the bounding box it is omitted completely. I believe this is happening here: https://github.com/d3plus/d3plus-text/blob/master/src/box.js#L189 . If I comment out this line the labels that are too long for the bounding box overflow. Not sure if this is by design, perhaps it should be an option at least.

I'm using the module like this:

      const box = d3plusText.box()
        .textAnchor('middle')
        .fontSize(14)
        .width(d => d.values.length * boxWidth + 5)
        .text(d => d.key.replace(/_/g, ' '))
        .height(45);

      subplot.append('g')
        .attr('class', 'boxLabelText')
        .attr('transform', 'translate(-5,0)')
        .each(function (d) {
          box
            .data([d])
            .select(this)();
        });

Google Group: https://groups.google.com/forum/#!topic/d3plus/Mm0f2JW7asg

Does anyone have experience using the text wrapping functions with double-byte languages like simplified Chinese?

I am told they typically don’t use spaces so the wrapping functions do not know where to break and wrap. I get one long (unwrapped) line of characters.

Is there any way to detect word breaks? How do HTML div containers handle this? Should we just check for breaks between each character?

Version 1.1.1 of d3-array just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As d3-array is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Yo @davelandry,

I finally got around to playing with this (awesome work!). I'm trying to add labels to a treemap, but can't get right and left text anchors to work right. Here's what I get for textAnchor('left'):

middle, OTOH, seems to work OK:

Here's a CodePen that I built for demoing the issue (scroll all the way to the bottom of the JS, there's a huge blob of data at the top)

Thanks!

TypeError: Object doesn't support property or method 'includes' at fontExists

Expected Behavior

Replace includes(fam) in src/fontExists.js in l.29 with indexOf(fam) !== -1 as "includes" is not supported by IE11, current core-js polyfills don't seem to solve the issue for Angular 4 and 5.

Current Behavior

IE11 is not able to render the text nodes.

Your Environment

Angular Core: 4.4.6
Angular Compiler CLI: 4.4.6
Node: 8.11.1
Navigator Platform: Win32
Browser: Internet Explorer 11.0.9600

d3plus/d3plus-common#21

Hi, I've read your blog post https://blog.datawheel.us/english-is-not-chinese-69b43959bb47, thanks for the work! But the example does not work when Chinese is combined with English, when putting an English sentence between, spaces between English words does not show up.

Expected Behavior

Spaces of English words show correctly

Current Behavior

Spaces between English words disappears

Steps to Reproduce (for bugs)

http://jsfiddle.net/gest45z9/12/

Your Environment

• Browser Name: Chrome
• Operating System and Version: MacOS Sierra v10.12.6

Expected Behavior

When using the TextBox with the fontResize set to true and passing a width and height, I expect the text to be wrapped to that container. In some cases depending on the text length and having a small width and big height, that doesn't happen.

Current Behavior

The text is enlarged way to much and goes out of the container bounds.

Steps to Reproduce (for bugs)

Provided a JSFiddle that reproduced the bug here: https://jsfiddle.net/74pg8we4/10/
Note that the big ok is the wrong behaviour, the small okkkkkk is what should happen.

Hi you are doing a great job creating this module. But I am unable to use this in my project as it always throws up the error box is undefined. Can you please provide us with some usage examples?

Also I am getting an error saying multiple define functions present when i uglifying my project with the help of grunt and require.js, It would be great if you could help me regarding this.