vijithassar / d3-textwrap Goto Github PK
View Code? Open in Web Editor NEWpainless cross-browser line wrapping for text passages in SVG projects built with D3.js
License: MIT License
painless cross-browser line wrapping for text passages in SVG projects built with D3.js
License: MIT License
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
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
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")
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!
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?
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.
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.
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.
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.
(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.
Do you mind specifying a license so I know how you'd like this code to be used?
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');
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.
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.
Is anyone working on center alignment? If not, I'll try to take a stab at it (& do a PR if success) since I need it.
I have install the package using >npm install d3-textwrap but could not find declaration file for this module.
If you do:
d3.selectAll('text').textwrap(bounds, padding);
it only affects the first element that matches the selector.
Workaround:
d3.selectAll('text').each(function(d) { d3.select(this).textwrap(bounds, padding); });
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.