Skip to content

Instantly share code, notes, and snippets.

@vijithassar
Last active October 10, 2023 11:44
Show Gist options
  • Save vijithassar/8278587 to your computer and use it in GitHub Desktop.
Save vijithassar/8278587 to your computer and use it in GitHub Desktop.
d3textwrap plugin demo
!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})});
<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>
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;
}
(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