d3textwrap plugin demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-selection"],e):e(t.d3=t.d3||{},t.d3)}(this,function(t,e){"use strict";var n,o,r,i,d,u,p,a;n="undefined"==typeof SVGForeignObjectElement?"tspans":"foreignobject",o=function(t){var n,o;return o="function"==typeof t,"object"!=typeof t||t.nodeType?!!(t instanceof e.selection||t.nodeType||o||n)||(console.error("invalid bounds specified for text wrapping"),!1):!(!t.height||!t.width)||(console.error("text wrapping bounds must specify height and width"),!1)},r=function(t){var e,n,o,r;for(e=["height","width"],"function"==typeof t?n=t():t.nodeType?n=t.getBoundingClientRect():"object"==typeof t&&(n=t),o=Object.create(null),r=0;r<e.length;r++)o[e[r]]=n[e[r]];return o},i=function(t){var e;return"function"==typeof t?e=t():"number"==typeof t?e=t:"undefined"==typeof t&&(e=0),"number"==typeof e?e:void console.error("padding could not be converted into a number")},d=function(t,e){var n;return n={height:t.height-2*e,width:t.width-2*e}},u=function(t,e){var n;return n=d(r(t),i(e))},p={},p.foreignobject=function(t,n,o){var r,i,d,u;return r=t.text(),i=e.select(t.node().parentNode),t.remove(),d=i.append("foreignObject"),d.attr("requiredFeatures","http://www.w3.org/TR/SVG11/feature#Extensibility").attr("width",n.width).attr("height",n.height),"number"==typeof o&&d.attr("x",o).attr("y",o),u=d.append("xhtml:div"),u.style("height",n.height).style("width",n.width).html(r),u},p.tspans=function(t,e,n){var o,r,i,d,u,p;for(o=t.text().split(" ").reverse(),t.text(""),u=t.append("tspan"),u.attr("dx",0).attr("dy",0),d=0;o.length>0;)r=o.pop(),u.text(u.text()+" "+r),i=u.node().getComputedTextLength()||0,i>e.width&&(p=u.text().split(" ").slice(0,-1).join(" "),u.text(p),d=u.node().getComputedTextLength()*-1,u=t.append("tspan"),u.attr("dx",d).attr("dy","1em").text(r));"number"==typeof n&&t.attr("y",t.attr("y")+n).attr("x",t.attr("x")+n)},a=function(){var t,r,d;return t=function(t){t.each(function(){e.select(this).call(p[n],u(r,d),i(d))})},t.bounds=function(e){return e?o(e)?(r=e,t):(console.error("invalid text wrapping bounds"),!1):r},t.padding=function(e){return e?"number"==typeof e||"function"==typeof e?(d=e,t):(console.error("text wrap padding value must be either a number or a function"),!1):d},t.method=function(e){return e?(n=e,t):n},t};var c=a;t.selection=e.selection,t.select=e.select,t.textwrap=c,Object.defineProperty(t,"__esModule",{value:!0})}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>d3-textwrap example</title> | |
<link href="textwrapdemo.css" rel="stylesheet" type="text/css"> | |
</head> | |
<body> | |
<div id="page-wrapper"> | |
<div id="overview"> | |
<a href="http://www.github.com/vijithassar/d3-textwrap">d3-textwrap</a> is a <a href="http://d3js.org">D3.js</a> plugin written by <a href="http://www.vijithassar.com">Vijith Assar</a></a> which allows quick cross-browser text wrapping in SVG images. | |
</div> | |
<div id="demo"> | |
<div id="text-content"> | |
<h3>Text</h3> | |
<textarea>All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy. All work and no play makes Vijith a dull boy.</textarea> | |
</div> | |
<div id="set-padding"> | |
<h3>Padding (optional)</h3> | |
<form> | |
<input name="padding" id="padding" type="text" value="30"> | |
</form> | |
</div> | |
<div id="wrap-targets"> | |
<h3>Click to wrap</h3> | |
<svg> | |
</svg> | |
</div> | |
</div> | |
</div> | |
<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script> | |
<script src="./d3-textwrap.min.js" type="text/javascript"></script> | |
<script src="textwrapdemo.js" type="text/javascript"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: 'Georgia', 'Crimson-Text', 'serif'; | |
width: 100%; | |
float: left; | |
} | |
h3 { | |
font-size: small; | |
font-family: 'Arial Black', 'Arial', 'sans-serif'; | |
text-transform: uppercase; | |
font-weight: bold; | |
color: #666666; | |
} | |
div#page-wrapper { | |
display: block; | |
margin: auto; | |
padding: 1em; | |
width: 960px; | |
} | |
div#overview { | |
text-align: left; | |
width: 30%; | |
float: left; | |
font-size: large; | |
font-style: italic; | |
padding: 2.7em 1em 0em 1em; | |
} | |
div#text-content { | |
width: 30%; | |
float: left; | |
padding: 0 1em 0 1em; | |
} | |
div#set-padding { | |
width: 20%; | |
float: left; | |
padding: 0 1em 0 1em; | |
} | |
div#wrap-targets { | |
clear: both; | |
} | |
div#demo { | |
width: 900px; | |
} | |
div#overview { | |
color: #111111; | |
} | |
div#overview a { | |
color: #111111; | |
} | |
div#demo textarea { | |
width: 100%; | |
height: 120px; | |
border: 1px solid #666666; | |
color: #666666; | |
font-size: x-small; | |
font-family: 'Arial', 'sans-serif' | |
} | |
div#demo input#padding { | |
font-family: 'Georgia', 'Crimson Text', 'serif'; | |
font-style: italic; | |
width: 240px; | |
height: 120px; | |
font-size: 70px; | |
color: #666666; | |
border: 1px solid #666666; | |
text-align: center; | |
} | |
div#demo svg { | |
height: 240px; | |
width: 100%; | |
background-color: #FFFFFF; | |
border: 1px solid #666666; | |
} | |
svg g.targets { | |
font-size: 120%; | |
color: #666666; | |
} | |
svg .first { | |
fill: #FFCCCC; | |
} | |
svg .second { | |
fill: #CCFFFF; | |
} | |
svg .third { | |
fill: #FFFFCC; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
// general setup, declare variables | |
var demo, | |
svg, | |
width, | |
height, | |
targets, | |
first, | |
second, | |
third, | |
wrap | |
demo = d3.select('div#demo') | |
svg = demo.select('svg') | |
width = svg.style('width').replace('px', '') | |
height = svg.style('height').replace('px', '') | |
// create three rectangles | |
first = svg.append('g').classed('target', true) | |
first | |
.attr('transform', 'translate(0,0)') | |
.append('rect') | |
.attr('width', width * 0.4) | |
.attr('height', height) | |
.classed('first', true) | |
second = svg.append('g').classed('target', true) | |
second | |
.attr('transform', 'translate(' + (width * 0.4) + ',0)') | |
.append('rect') | |
.attr('width', width * 0.35) | |
.attr('height', height) | |
.classed('second', true) | |
third = svg.append('g').classed('target', true) | |
third | |
.attr('transform', 'translate(' + (width * 0.75) + ',0)') | |
.append('rect') | |
.attr('width', width * 0.25) | |
.attr('height', height) | |
.classed('third', true) | |
wrap = d3.textwrap() | |
targets = svg.selectAll('g.target') | |
// wrap text into rectangle on click | |
targets.on('click', function() { | |
var padding, | |
bounds, | |
text_node, | |
text_content | |
// remove any text which is already present | |
targets.selectAll('text').remove() | |
targets.selectAll('foreignObject').remove() | |
// add a text node and transfer the textarea content to it | |
text_node = d3.select(this).append('text') | |
text_content = d3.select('div#demo textarea') | |
.property('value') | |
text_node.text(text_content) | |
// use the selected rect element as the bounds | |
bounds = d3.select(this).select('rect').node() | |
// get current padding value, or default to 0 | |
padding = parseInt(demo.select('input#padding').property('value'), 10) || 0 | |
wrap.bounds(bounds).padding(padding) | |
// wrap text to the rectangle in the same group | |
text_node.call(wrap) | |
}) | |
}).call(this) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment