mermaid

<!DOCTYPE html> <html> <head> <title>d3.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../doc-style.css" /> <script src="../doc-filelist.js"></script> <script> var relativeDir = "../", thisFile = "Users/knut/Documents/source/mermaid/src/d3.js", defaultSidebar = true; </script> <script src="../doc-script.js"></script> <script src="../mermaid.js"></script> <link rel="stylesheet" href="../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#d3.js">d3.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="d3.js"> <h1> <a href="#d3.js" name="d3.js" class="pilcrow">¶</a>d3.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> </td> <td class="code highlight"><div class="highlight"><pre>/* global window */ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> log.debug('Setting up d3'); </td> <td class="code highlight"><div class="highlight"><pre> var d3; if (require) { try { d3 = require("d3"); } catch (e) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> log.debug('Exception ... but ok'); log.debug(e); </td> <td class="code highlight"><div class="highlight"><pre> } } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4" id="section-4">¶</a> </div> log.debug(d3); </td> <td class="code highlight"><div class="highlight"><pre> if (!d3) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5" id="section-5">¶</a> </div> if(typeof window !== 'undefined') </td> <td class="code highlight"><div class="highlight"><pre> d3 = window.d3; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6" id="section-6">¶</a> </div> if(typeof window === 'undefined'){ window = {}; window.d3 = d3; } log.debug('window'); log.debug(window); </td> <td class="code highlight"><div class="highlight"><pre> module.exports = d3; /* jshint ignore:start */ </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7" id="section-7">¶</a> </div> <div class="dox"> <div class="summary"> </div> <div class="body">D3 Text Wrap By Vijith Assar <a href="http://www.vijithassar.com">http://www.vijithassar.com</a> <a href="http://www.github.com/vijithassar">http://www.github.com/vijithassar</a> </div> <div class="details"> <div class="dox_tag_title">vijithassar Detailed</div> <div class="dox_tag_detail"> instructions at <a href="http://www.github.com/vijithassar/d3textwrap">http://www.github.com/vijithassar/d3textwrap</a> </div> </div> </div> </td> <td class="code highlight"><div class="highlight"><pre> (function() { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8" id="section-8">¶</a> </div> set this variable to a string value to always force a particular wrap method for development purposes, for example to check tspan rendering using a foreignobject-enabled browser. set to 'tspan' to use tspans and 'foreignobject' to use foreignobject </td> <td class="code highlight"><div class="highlight"><pre> var force_wrap_method = false; // by default no wrap method is forced force_wrap_method = 'tspans'; // uncomment this statement to force tspans </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9" id="section-9">¶</a> </div> force_wrap_method = 'foreignobjects'; // uncomment this statement to force foreignobjects </td> <td class="code highlight"><div class="highlight"><pre> </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10" id="section-10">¶</a> </div> exit immediately if something in this location has already been defined; the plugin will defer to whatever else you're doing in your code </td> <td class="code highlight"><div class="highlight"><pre> if(d3.selection.prototype.textwrap) { return false; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11" id="section-11">¶</a> </div> double check the force_wrap_method flag and reset if someone screwed up the above settings </td> <td class="code highlight"><div class="highlight"><pre> if(typeof force_wrap_method == 'undefined') { var force_wrap_method = false; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12" id="section-12">¶</a> </div> create the plugin method twice, both for regular use and again for use inside the enter() selection </td> <td class="code highlight"><div class="highlight"><pre> d3.selection.prototype.textwrap = d3.selection.enter.prototype.textwrap = function(bounds, padding) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13" id="section-13">¶</a> </div> default value of padding is zero if it's undefined </td> <td class="code highlight"><div class="highlight"><pre> var padding = parseInt(padding) || 0; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14" id="section-14">¶</a> </div> save callee into a variable so we can continue to refer to it as the function scope changes </td> <td class="code highlight"><div class="highlight"><pre> var selection = this; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15" id="section-15">¶</a> </div> create a variable to store desired return values in </td> <td class="code highlight"><div class="highlight"><pre> var return_value; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16" id="section-16">¶</a> </div> extract wrap boundaries from any d3-selected rect and return them in a format that matches the simpler object argument option </td> <td class="code highlight"><div class="highlight"><pre> var extract_bounds = function(bounds) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17" id="section-17">¶</a> </div> discard the nested array wrappers added by d3 </td> <td class="code highlight"><div class="highlight"><pre> var bounding_rect = bounds[0][0]; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18" id="section-18">¶</a> </div> sanitize the svg element name so we can test against it </td> <td class="code highlight"><div class="highlight"><pre> var element_type = bounding_rect.tagName.toString(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19" id="section-19">¶</a> </div> if it's not a rect, exit </td> <td class="code highlight"><div class="highlight"><pre> if(element_type !== 'rect') { return false; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20" id="section-20">¶</a> </div> if it's a rect, proceed to extracting the position attributes </td> <td class="code highlight"><div class="highlight"><pre> } else { var bounds_extracted = {}; bounds_extracted.x = d3.select(bounding_rect).attr('x') || 0; bounds_extracted.y = d3.select(bounding_rect).attr('y') || 0; bounds_extracted.width = d3.select(bounding_rect).attr('width') || 0; bounds_extracted.height = d3.select(bounding_rect).attr('height') || 0; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21" id="section-21">¶</a> </div> also pass along the getter function </td> <td class="code highlight"><div class="highlight"><pre> bounds_extracted.attr = bounds.attr; } return bounds_extracted; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22" id="section-22">¶</a> </div> double check the input argument for the wrapping boundaries to make sure it actually contains all the information we'll need in order to wrap successfully </td> <td class="code highlight"><div class="highlight"><pre> var verify_bounds = function(bounds) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23" id="section-23">¶</a> </div> quickly add a simple getter method so you can use either bounds.x or bounds.attr('x') as your notation, the latter being a common convention among D3 developers </td> <td class="code highlight"><div class="highlight"><pre> if(!bounds.attr) { bounds.attr = function(property) { if(this[property]) { return this[property]; } } } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24" id="section-24">¶</a> </div> if it's an associative array, make sure it has all the necessary properties represented directly </td> <td class="code highlight"><div class="highlight"><pre> if( (typeof bounds == 'object') && (typeof bounds.x !== 'undefined') && (typeof bounds.y !== 'undefined') && (typeof bounds.width !== 'undefined') && (typeof bounds.height !== 'undefined') </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25" id="section-25">¶</a> </div> if that's the case, then the bounds are fine </td> <td class="code highlight"><div class="highlight"><pre> ) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26" id="section-26">¶</a> </div> return the lightly modified bounds </td> <td class="code highlight"><div class="highlight"><pre> return bounds; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27" id="section-27">¶</a> </div> if it's a numerically indexed array, assume it's a d3-selected rect and try to extract the positions </td> <td class="code highlight"><div class="highlight"><pre> } else if ( </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28" id="section-28">¶</a> </div> first try to make sure it's an array using Array.isArray </td> <td class="code highlight"><div class="highlight"><pre> ( (typeof Array.isArray == 'function') && (Array.isArray(bounds)) ) || </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29" id="section-29">¶</a> </div> but since Array.isArray isn't always supported, fall back to casting to the object to string when it's not </td> <td class="code highlight"><div class="highlight"><pre> (Object.prototype.toString.call(bounds) === '[object Array]') ) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30" id="section-30">¶</a> </div> once you're sure it's an array, extract the boundaries from the rect </td> <td class="code highlight"><div class="highlight"><pre> var extracted_bounds = extract_bounds(bounds); return extracted_bounds; } else { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31" id="section-31">¶</a> </div> but if the bounds are neither an object nor a numerical array, then the bounds argument is invalid and you'll need to fix it </td> <td class="code highlight"><div class="highlight"><pre> return false; } } var apply_padding = function(bounds, padding) { var padded_bounds = bounds; if(padding !== 0) { padded_bounds.x = parseInt(padded_bounds.x) + padding; padded_bounds.y = parseInt(padded_bounds.y) + padding; padded_bounds.width -= padding * 2; padded_bounds.height -= padding * 2; } return padded_bounds; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32" id="section-32">¶</a> </div> verify bounds </td> <td class="code highlight"><div class="highlight"><pre> var verified_bounds = verify_bounds(bounds); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33" id="section-33">¶</a> </div> modify bounds if a padding value is provided </td> <td class="code highlight"><div class="highlight"><pre> if(padding) { verified_bounds = apply_padding(verified_bounds, padding); } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34" id="section-34">¶</a> </div> check that we have the necessary conditions for this function to operate properly </td> <td class="code highlight"><div class="highlight"><pre> if( </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35" id="section-35">¶</a> </div> selection it's operating on cannot be not empty </td> <td class="code highlight"><div class="highlight"><pre> (selection.length == 0) || </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36" id="section-36">¶</a> </div> d3 must be available </td> <td class="code highlight"><div class="highlight"><pre> (!d3) || </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37" id="section-37">¶</a> </div> desired wrapping bounds must be provided as an input argument </td> <td class="code highlight"><div class="highlight"><pre> (!bounds) || </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38" id="section-38">¶</a> </div> input bounds must validate </td> <td class="code highlight"><div class="highlight"><pre> (!verified_bounds) ) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39" id="section-39">¶</a> </div> try to return the calling selection if possible so as not to interfere with methods downstream in the chain </td> <td class="code highlight"><div class="highlight"><pre> if(selection) { return selection; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40" id="section-40">¶</a> </div> if all else fails, just return false. if you hit this point then you're almost certainly trying to call the textwrap() method on something that doesn't make sense! </td> <td class="code highlight"><div class="highlight"><pre> } else { return false; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41" id="section-41">¶</a> </div> if we've validated everything then we can finally proceed to the meat of this operation </td> <td class="code highlight"><div class="highlight"><pre> } else { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42" id="section-42">¶</a> </div> reassign the verified bounds as the set we want to work with from here on; this ensures that we're using the same data structure for our bounds regardless of whether the input argument was a simple object or a d3 selection </td> <td class="code highlight"><div class="highlight"><pre> bounds = verified_bounds; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43" id="section-43">¶</a> </div> wrap using html and foreignObjects if they are supported </td> <td class="code highlight"><div class="highlight"><pre> var wrap_with_foreignobjects = function(item) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44" id="section-44">¶</a> </div> establish variables to quickly reference target nodes later </td> <td class="code highlight"><div class="highlight"><pre> var parent = d3.select(item[0].parentNode); var text_node = parent.select('text'); var styled_line_height = text_node.style('line-height'); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45" id="section-45">¶</a> </div> extract our desired content from the single text element </td> <td class="code highlight"><div class="highlight"><pre> var text_to_wrap = text_node.text(); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46" id="section-46">¶</a> </div> remove the text node and replace with a foreign object </td> <td class="code highlight"><div class="highlight"><pre> text_node.remove(); var foreign_object = parent.append('foreignObject'); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47" id="section-47">¶</a> </div> add foreign object and set dimensions, position, etc </td> <td class="code highlight"><div class="highlight"><pre> foreign_object .attr("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Extensibility") .attr('x', bounds.x) .attr('y', bounds.y) .attr('width', bounds.width) .attr('height', bounds.height); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48" id="section-48">¶</a> </div> insert an HTML div </td> <td class="code highlight"><div class="highlight"><pre> var wrap_div = foreign_object .append('xhtml:div') </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49" id="section-49">¶</a> </div> this class is currently hardcoded probably not necessary but easy to override using .classed() and for now it's nice to avoid a litany of input arguments </td> <td class="code highlight"><div class="highlight"><pre> .attr('class', 'wrapped'); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50" id="section-50">¶</a> </div> set div to same dimensions as foreign object </td> <td class="code highlight"><div class="highlight"><pre> wrap_div .style('height', bounds.height) .style('width', bounds.width) </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51" id="section-51">¶</a> </div> insert text content </td> <td class="code highlight"><div class="highlight"><pre> .html(text_to_wrap); if(styled_line_height) { wrap_div.style('line-height', styled_line_height); } return_value = parent.select('foreignObject'); } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52" id="section-52">¶</a> </div> wrap with tspans if foreignObject is undefined </td> <td class="code highlight"><div class="highlight"><pre> var wrap_with_tspans = function(item) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53" id="section-53">¶</a> </div> operate on the first text item in the selection </td> <td class="code highlight"><div class="highlight"><pre> var text_node = item[0]; var parent = text_node.parentNode; var text_node_selected = d3.select(text_node); </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54" id="section-54">¶</a> </div> measure initial size of the text node as rendered </td> <td class="code highlight"><div class="highlight"><pre> var text_node_height = text_node.getBBox().height; var text_node_width = text_node.getBBox().width; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55" id="section-55">¶</a> </div> figure out the line height, either from rendered height of the font or attached styling </td> <td class="code highlight"><div class="highlight"><pre> var line_height; var rendered_line_height = text_node_height; var styled_line_height = text_node_selected.style('line-height'); if( (styled_line_height) && (parseInt(styled_line_height)) ) { line_height = parseInt(styled_line_height.replace('px', '')); } else { line_height = rendered_line_height; } </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56" id="section-56">¶</a> </div> only fire the rest of this if the text content overflows the desired dimensions </td> <td class="code highlight"><div class="highlight"><pre> if(text_node_width > bounds.width) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-57" id="section-57">¶</a> </div> store whatever is inside the text node in a variable and then zero out the initial content; we'll reinsert in a moment using tspan elements. </td> <td class="code highlight"><div class="highlight"><pre> var text_to_wrap = text_node_selected.text(); text_node_selected.text(''); if(text_to_wrap) { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-58" id="section-58">¶</a> </div> keep track of whether we are splitting by spaces so we know whether to reinsert those spaces later </td> <td class="code highlight"><div class="highlight"><pre> var break_delimiter; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-59" id="section-59">¶</a> </div> split at spaces to create an array of individual words </td> <td class="code highlight"><div class="highlight"><pre> var text_to_wrap_array; if(text_to_wrap.indexOf(' ') !== -1) { var break_delimiter = ' '; text_to_wrap_array = text_to_wrap.split(' '); } else { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-60" id="section-60">¶</a> </div> if there are no spaces, figure out the split points by comparing rendered text width against bounds and translating that into character position cuts </td> <td class="code highlight"><div class="highlight"><pre> break_delimiter = ''; var string_length = text_to_wrap.length; var number_of_substrings = Math.ceil(text_node_width / bounds.width); var splice_interval = Math.floor(string_length / number_of_substrings); if( !(splice_interval * number_of_