vijithassar / d3-textwrap Goto Github PK

View Code? Open in Web Editor NEW

155.0 155.0 21.0 547 KB

painless cross-browser line wrapping for text passages in SVG projects built with D3.js

License: MIT License

JavaScript 100.00%

d3-textwrap's People

Contributors

Stargazers

Watchers

Forkers

chris-marie cummings jczaplew mationai kstohr sarahlag nkint stvhanna uniquejava moonthug amyjording praveenuics reynolddoss raanu vinodxyz namdaoduy mewtlu leoneckert

d3-textwrap's Issues

import declarations may only appear at top level of a module

I included d3-textwrap.js in my index file but I get the following error:

line 1 - import declarations may only appear at top level of a module

d3 text-wrap plugin changes coordinates

I would wrap dynamic text.
I tried to apply what mentioned in doc

let textWrap;
let d3Text1 = d3.selectAll(stations);
textWrap = d3wrap.textwrap().bounds({ height: 100, width: 100 });
d3Text1.call(textWrap); // commenting this will make initial position but no wrap

the plugin is working but the text is getting moved from it's initial position

here a reproduction on stackblitz

How to import or require after npm install?

I've installed with NPM and I'd like to import or require in my ES6 file, but I'm not sure of the syntax.

I first include d3 v4 and confirm my chart works.
import * as d3 from 'd3'

But not sure how to import or require d3-textwrap. A few things that don't work:

import textwrap from 'd3-textwrap'
import { textwrap } from 'd3-textwrap'
import { d3, textwrap } from 'd3-textwrap'
require("d3-textwrap")
var require("d3-textwrap")
var d3Textwrap = require("d3-textwrap")

Bower package?

Can't debug the getbounds function

Thanks for the work on the plugin. I'd love to use it.

As I want to wrap a large number of svg-text elements already located by another algorithm, I need to wrap the text at its original position. When I try to to use a custom getbound function, nothing happens, all texts stay the same. I see no errors in Chrome Console as well. Therefore I made a simple jsfiddle to test a simple function, that sets the elements boundaries based on the elements original position. Unfortunately, nothing happens and I can't manage to debug the function, as the breakbpoint in Chrome Console Debugger is never reached. I tried to debug through your code, but did not understand why the boundary function is never reached.

Is this intended behaviour, and if so, how can I debug code in the boundary function?

http://jsfiddle.net/MathiasRiechert/140geakL/2/

Thanks alot!

Import and Export Errors loading in script element

I'm using the syntax from the docs:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
    <script type="text/javascript" src="textwrap.js"></script>
  </head>
  <body>
    <div id="graph"></div>
  </body>
</html>

But on Safari I get this error:

Unexpected token '{'. import call expects exactly one argument.
textwrap.js:1

And on Firefox:

SyntaxError: import declarations may only appear at top level of a module
textrap.js:1

Looks like the example was added recently (#15), but perhaps I'm missing something? Do I need to change the source file to load this way?

need help to use the correct syntax of wrapping running text

I have the following text appending method:

      nodeEnter.append('text')
        .attr('x', '2')
        .attr('y', '1.2em')
        .text(function(d) {
          return d.name 
        })

I can't figure out how to use the textwrap function here.

Build in font formatting

When I call textwrap, any attributes I've assigned to the text (color, font, size, etc) are removed from said text. As far as I can tell, there's currently no way to pass attributes directly through the textwrap module to assign them as attributes of the foreignObject. My current solution is to run something like the following after creating the text with the call:

svg.select("foreignObject") .attr("color", "blue") .attr('font-size', 30) ;

This is okay, sort of, but it introduces additional blocks that need to be navigated, e.g., either ensuring that textwrap is the first foreignObject selected or putting all textwraps in their own groups before assigning attributes.

It seems like it would make more sense to build the assigning of text attributes into textwrap itself, instead. I'm happy to take a crack at it, if it makes sense to, but I wanted to open an issue first in case there are reasons it doesn't make sense as a solution or it's better handled by the repo owner.

Text alignment in IE11

IE 11 textwrap displaces successive wrapped lines outdented to the left.

Using FireFox to display the D3 graph produces this:

(the red rectangle is the bounding one supplied to d3textwrap).
whereas IE11 with the same code produces this:

It seems to be miscalculating (overestimating) the text width on successive lines.

callback function once wrapping complete?

I want to position the newly wrapped text, but I've noticed that immediately after .call(wrap) if I try to get the boundingClientRect, it is not accurate. I need to set a short timeout (~100ms) to get the right calculated bounds.

wrap_with_tspans method omits single word at end

(About to report a number of bugs. Would first of all like to say thanks for a great effort - I really like the idea, and it is just what I need. Unfortunately...)

Using the wrap_with_tspans method with IE11, if a single word should be wrapped to a line by itself, then this word is missed out.

This capture shows this happening on the demo page:

Adding an extra word to the text fixes it.

Specify a LICENSE

Do you mind specifying a license so I know how you'd like this code to be used?

Doesn't select right element when <text> element is not only one within parent

Given this,

<g>
  <g class="tick" transform="translate(123,0)" style="opacity: 1;">
    <line y2="-168" x2="0"></line>
    <text dy=".71em" y="7" x="0" style="text-anchor: middle;">2009</text>
  </g>
  <g class="tick" transform="translate(246,0)" style="opacity: 1;">
    <line y2="-168" x2="0"></line>
    <text dy=".71em" y="7" x="0" style="text-anchor: middle;">2010</text>
  </g>
  <text class="nv-axislabel" text-anchor="middle" y="36" x="307.5">Level 2</text>
</g>

if I try to do something like this: d3.select('.nv-x .nv-axis .nv-axislabel').textwrap({x:0,y:0,width:200,height:200})

then this code selects the wrong text node, because it looks for the first text node under the parent, which is not the one that's been wrapped.

var wrap_with_foreignobjects = function(item) {
                // establish variables to quickly reference target nodes later
                var parent = d3.select(item[0].parentNode);
                var text_node = parent.select('text');

Demo shows all text in pink box in IE11

In IE11, the demo http://bl.ocks.org/vijithassar/8278587 always displays in the left hand (pink) box, which ever of the three boxes is clicked. However, the formatted width does correctly reflect the chosen box.

Problem with existing coordinates.

Hi, I have some text with fixed coordinates to wrap.
There is a problem in the padding computing: a string is added to a number:

in your code in src/textwrap.js at line 165

if (typeof padding === 'number') {
        text
            .attr('y', text.attr('y') + padding)
            .attr('x', text.attr('x') + padding);
    }

but text.attr('x') is already set and it is returning a string in my case.
So that in the end instead having a <text> with x = 5 I have x = 60

For instance:

nodes.append('text').attr('x', 6)
 // ...
const _wrap = textwrap()
    .bounds({height: 4800, width: textWidth})
    .padding(1)
    .method('tspans')
  selectAll('text').call(_wrap)

This will fix it:

        if (typeof padding === 'number') {
            var cx = parseInt(text.attr('x')) || 0
            var cy = parseInt(text.attr('y')) || 0
            text
                .attr('y', cy + padding)
                .attr('x', cx + padding);
        }

Just prepearing a pull request.

it only affects the first element that matches the selector.

Workaround:
d3.selectAll('text').each(function(d) { d3.select(this).textwrap(bounds, padding); });

vijithassar / d3-textwrap Goto Github PK

d3-textwrap's People

Contributors

Stargazers

Watchers

Forkers

d3-textwrap's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs