EVOLUTION-MANAGER

Edit File: develop_sizing.html

<!DOCTYPE html>

<head>

<title>HTML Widget Sizing</title>

// Only run this code in IE 8
if (!!window.navigator.userAgent.match("MSIE 8")) {
!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url$)['"]?([^\/$'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/$[\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*$/,maxw:/$[\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*$/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
};
</script>
<script>

/**
 * jQuery Plugin: Sticky Tabs
 *
 * @author Aidan Lister <aidan@php.net>
 * adapted by Ruben Arslan to activate parent tabs too
 * http://www.aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/
 */
(function($) {
  "use strict";
  $.fn.rmarkdownStickyTabs = function() {
    var context = this;
    // Show the tab corresponding with the hash in the URL, or the first tab
    var showStuffFromHash = function() {
      var hash = window.location.hash;
      var selector = hash ? 'a[href="' + hash + '"]' : 'li.active > a';
      var $selector = $(selector, context);
      if($selector.data('toggle') === "tab") {
        $selector.tab('show');
        // walk up the ancestors of this element, show any hidden tabs
        $selector.parents('.section.tabset').each(function(i, elm) {
          var link = $('a[href="#' + $(elm).attr('id') + '"]');
          if(link.data('toggle') === "tab") {
            link.tab("show");
          }
        });
      }
    };

// Set the correct tab when the page loads
    showStuffFromHash(context);

// Set the correct tab when a user uses their back/forward button
    $(window).on('hashchange', function() {
      showStuffFromHash(context);
    });

// Change the URL when tabs are clicked
    $('a', context).on('click', function(e) {
      history.pushState(null, null, this.href);
      showStuffFromHash(context);
    });

return this;
  };
}(jQuery));

window.buildTabsets = function(tocID) {

// build a tabset from a section div with the .tabset class
  function buildTabset(tabset) {

// check for fade and pills options
    var fade = tabset.hasClass("tabset-fade");
    var pills = tabset.hasClass("tabset-pills");
    var navClass = pills ? "nav-pills" : "nav-tabs";

// determine the heading level of the tabset and tabs
    var match = tabset.attr('class').match(/level(\d) /);
    if (match === null)
      return;
    var tabsetLevel = Number(match[1]);
    var tabLevel = tabsetLevel + 1;

// find all subheadings immediately below
    var tabs = tabset.find("div.section.level" + tabLevel);
    if (!tabs.length)
      return;

// create tablist and tab-content elements
    var tabList = $('<ul class="nav ' + navClass + '" role="tablist"></ul>');
    $(tabs[0]).before(tabList);
    var tabContent = $('<div class="tab-content"></div>');
    $(tabs[0]).before(tabContent);

// build the tabset
    var activeTab = 0;
    tabs.each(function(i) {

// get the tab div
      var tab = $(tabs[i]);

// get the id then sanitize it for use with bootstrap tabs
      var id = tab.attr('id');

// see if this is marked as the active tab
      if (tab.hasClass('active'))
        activeTab = i;

// remove any table of contents entries associated with
      // this ID (since we'll be removing the heading element)
      $("div#" + tocID + " li a[href='#" + id + "']").parent().remove();

// sanitize the id for use with bootstrap tabs
      id = id.replace(/[.\/?&!#<>]/g, '').replace(/\s/g, '_');
      tab.attr('id', id);

// get the heading element within it, grab it's text, then remove it
      var heading = tab.find('h' + tabLevel + ':first');
      var headingText = heading.html();
      heading.remove();

// build and append the tab list item
      var a = $('<a role="tab" data-toggle="tab">' + headingText + '</a>');
      a.attr('href', '#' + id);
      a.attr('aria-controls', id);
      var li = $('<li role="presentation"></li>');
      li.append(a);
      tabList.append(li);

// set it's attributes
      tab.attr('role', 'tabpanel');
      tab.addClass('tab-pane');
      tab.addClass('tabbed-pane');
      if (fade)
        tab.addClass('fade');

// move it into the tab content div
      tab.detach().appendTo(tabContent);
    });

// set active tab
    $(tabList.children('li')[activeTab]).addClass('active');
    var active = $(tabContent.children('div.section')[activeTab]);
    active.addClass('active');
    if (fade)
      active.addClass('in');

if (tabset.hasClass("tabset-sticky"))
      tabset.rmarkdownStickyTabs();
  }

// convert section divs with the .tabset class to tabsets
  var tabsets = $("div.section.tabset");
  tabsets.each(function(i) {
    buildTabset($(tabsets[i]));
  });
};

</script>

</style>
<script>
// apply pandoc div.sourceCode style to pre.sourceCode instead
(function() {
  var sheets = document.styleSheets;
  for (var i = 0; i < sheets.length; i++) {
    if (sheets[i].ownerNode.dataset["origin"] !== "pandoc") continue;
    try { var rules = sheets[i].cssRules; } catch (e) { continue; }
    for (var j = 0; j < rules.length; j++) {
      var rule = rules[j];
      // check if there is a div.sourceCode rule
      if (rule.type !== rule.STYLE_RULE || rule.selectorText !== "div.sourceCode") continue;
      var style = rule.style.cssText;
      // check if color or background-color is set
      if (rule.style.color === '' || rule.style.backgroundColor === '') continue;
      // replace div.sourceCode by a pre.sourceCode rule
      sheets[i].deleteRule(j);
      sheets[i].insertRule('pre.sourceCode{' + style + '}', j);
    }
  }
})();
</script>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>

.tabset-dropdown > .nav-tabs > li.active:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
  content: "";
  border: none;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs > li.active {
  display: block;
}

.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
  border: none;
  display: inline-block;
  border-radius: 4px;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
  display: block;
  float: none;
}

.tabset-dropdown > .nav-tabs > li {
  display: none;
}
</style>

$(document).ready(function () {
  $('.tabset-dropdown > .nav-tabs > li').click(function () {
    $(this).parent().toggleClass('nav-tabs-open')
  });
});
</script>

</head>

<body>

<h1 class="title toc-ignore">HTML Widget Sizing</h1>
<h4 class="date">2019-10-07</h4>

</div>

<div id="TOC">
<ul>
<li><a href="#overview">Overview</a></li>
<li><a href="#specifying-a-sizing-policy">Specifying a sizing policy</a><ul>
<li><a href="#examples">Examples</a></li>
<li><a href="#available-options">Available options</a></li>
</ul></li>
<li><a href="#javascript-resize-method">JavaScript resize method</a><ul>
<li><a href="#examples-1">Examples</a><ul>
<li><a href="#dygraphs">dygraphs</a></li>
<li><a href="#forcenetwork">forceNetwork</a></li>
</ul></li>
</ul></li>
</ul>
</div>

<div id="overview" class="section level2">
<h2>Overview</h2>
<p>In the spirit of HTML widgets working just like plots in R, it’s important that HTML widgets intelligently size themselves to their container, whether it be the RStudio Viewer, a figure in knitr, or a UI panel within a Shiny application. The <strong>htmlwidgets</strong> framework provides a rich mechanism for specifying the sizing behavior of widgets.</p>
<p>This sizing mechanism is designed to address the following constraints that affect the natural size of a widget:</p>
<ul>
<li><p><strong>The kind of widget it is.</strong> Some widgets may only be designed to look good at small, fixed sizes (like <a href="https://github.com/htmlwidgets/sparkline">sparklines</a>) while other widgets may want every pixel that can be spared (like <a href="http://christophergandrud.github.io/networkD3/">network graphs</a>).</p></li>
<li><p><strong>The context into which the widget is rendered.</strong> While a given widget might look great at 960px by 480px in an R Markdown document, the same widget would look silly at that size in the RStudio Viewer pane, which is typically much smaller.</p></li>
</ul>
<p>Widget sizing is handled in two steps:</p>
<ol style="list-style-type: decimal">
<li><p>First, a sizing policy is specified for the widget. This is done via the <code>sizingPolicy</code> argument to the <code>createWidget</code> function. Most widgets can accept the default sizing policy (or override only one or two aspects of it) and get satisfactory sizing behavior (see details below).</p></li>
<li><p>The sizing policy is used by the framework to compute the correct width and height for a widget given where it is being rendered. This size information is then passed to the <code>initialize</code> and <code>resize</code> methods of the widgets JavaScript binding. It’s up to the widget to then forward this size information to the underlying JavaScript library.</p></li>
</ol>
</div>
<div id="specifying-a-sizing-policy" class="section level2">
<h2>Specifying a sizing policy</h2>
<p>The default HTML widget sizing policy treats the widget with the same sizing semantics as an R plot. When printed at the R console the widget is displayed within the RStudio Viewer and sized to fill the Viewer pane (modulo any padding). When rendered inside an R Markdown document the widget is sized based on the default size of figures in the document.</p>
<p>Note that for most widgets the default sizing behavior is fine and you won’t need to create a custom sizing policy. If you need a slightly different behavior than the default you can also selectively override the default behavior by calling the <code>sizingPolicy</code> function and passing the result to <code>createWidget</code>. For example:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1">htmlwidgets<span class="op">::</span><span class="kw">createWidget</span>(</a>
<a class="sourceLine" id="cb1-2" data-line-number="2">  <span class="st">&quot;sigma&quot;</span>, </a>
<a class="sourceLine" id="cb1-3" data-line-number="3">  x, </a>
<a class="sourceLine" id="cb1-4" data-line-number="4">  <span class="dt">width =</span> width, </a>
<a class="sourceLine" id="cb1-5" data-line-number="5">  <span class="dt">height =</span> height,</a>
<a class="sourceLine" id="cb1-6" data-line-number="6">  <span class="dt">sizingPolicy =</span> htmlwidgets<span class="op">::</span><span class="kw">sizingPolicy</span>(</a>
<a class="sourceLine" id="cb1-7" data-line-number="7">    <span class="dt">viewer.padding =</span> <span class="dv">0</span>,</a>
<a class="sourceLine" id="cb1-8" data-line-number="8">    <span class="dt">viewer.paneHeight =</span> <span class="dv">500</span>,</a>
<a class="sourceLine" id="cb1-9" data-line-number="9">    <span class="dt">browser.fill =</span> <span class="ot">TRUE</span></a>
<a class="sourceLine" id="cb1-10" data-line-number="10">  )</a>
<a class="sourceLine" id="cb1-11" data-line-number="11">)</a></code></pre></div>
<div id="examples" class="section level3">
<h3>Examples</h3>
<p>The <a href="http://christophergandrud.github.io/networkD3/">networkD3</a> package uses custom sizing policies for all of its widgets. The <code>simpleNetwork</code> widget eliminates padding (as d3 is already providing padding) and specifies that it wants to fill up as much space as possible when displayed in a standalone web browser:</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw">sizingPolicy</span>(<span class="dt">padding =</span> <span class="dv">0</span>, <span class="dt">browser.fill =</span> <span class="ot">TRUE</span>)</a></code></pre></div>
<p>The <code>sankeyNetwork</code> widget requires much more space than is afforded by the RStudio Viewer or a typical knitr figure so it disables those automatic sizing behaviors. It also provides a more reasonable default width and height for knitr documents:</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="kw">sizingPolicy</span>(<span class="dt">viewer.suppress =</span> <span class="ot">TRUE</span>,</a>
<a class="sourceLine" id="cb3-2" data-line-number="2">             <span class="dt">knitr.figure =</span> <span class="ot">FALSE</span>,</a>
<a class="sourceLine" id="cb3-3" data-line-number="3">             <span class="dt">browser.fill =</span> <span class="ot">TRUE</span>,</a>
<a class="sourceLine" id="cb3-4" data-line-number="4">             <span class="dt">browser.padding =</span> <span class="dv">75</span>,</a>
<a class="sourceLine" id="cb3-5" data-line-number="5">             <span class="dt">knitr.defaultWidth =</span> <span class="dv">800</span>,</a>
<a class="sourceLine" id="cb3-6" data-line-number="6">             <span class="dt">knitr.defaultHeight =</span> <span class="dv">500</span>)</a></code></pre></div>
</div>
<div id="available-options" class="section level3">
<h3>Available options</h3>
<p>Here are the various options that can be specified within a sizing policy:</p>
<table>
<colgroup>
<col width="50%"></col>
<col width="50%"></col>
</colgroup>
<thead>
<tr class="header">
<th>Option</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><strong>defaultWidth</strong></td>
<td>The default width used to display the widget. This parameter specifies the default width for viewing in all contexts (browser, viewer, and knitr) unless it is specifically overridden with e.g. browser.defaultWidth.</td>
</tr>
<tr class="even">
<td><strong>defaultHeight</strong></td>
<td>The default height used to display the widget. This parameter specifies the default height for viewing in all contexts (browser, viewer, and knitr) unless it is specifically overridden with e.g. browser.defaultHeight.</td>
</tr>
<tr class="odd">
<td><strong>padding</strong></td>
<td>Padding around the widget (in pixels). This parameter specifies the padding for viewing in all contexts (browser and viewer) unless it is specifically overridden by e.g. browser.padding.</td>
</tr>
<tr class="even">
<td><strong>viewer.defaultWidth</strong></td>
<td>The default width used to display the widget within the RStudio Viewer.</td>
</tr>
<tr class="odd">
<td><strong>viewer.defaultHeight</strong></td>
<td>The default height used to display the widget within the RStudio Viewer.</td>
</tr>
<tr class="even">
<td><strong>viewer.padding</strong></td>
<td>Padding around the widget when displayed in the RStudio Viewer (defaults to 15 pixels).</td>
</tr>
<tr class="odd">
<td><strong>viewer.fill</strong></td>
<td>When displayed in the RStudio Viewer, automatically size the widget to the viewer dimensions (note that viewer.padding is still applied). Default to TRUE.</td>
</tr>
<tr class="even">
<td><strong>viewer.suppress</strong></td>
<td>Never display the widget within the RStudio Viewer (useful for widgets that require a large amount of space for rendering). Defaults to FALSE.</td>
</tr>
<tr class="odd">
<td><strong>viewer.paneHeight</strong></td>
<td>Request that the RStudio Viewer be forced to a specific height when displaying this widget.</td>
</tr>
<tr class="even">
<td><strong>browser.defaultWidth</strong></td>
<td>The default width used to display the widget within a standalone web browser.</td>
</tr>
<tr class="odd">
<td><strong>browser.defaultHeight</strong></td>
<td>The default height used to display the widget within a standalone web browser.</td>
</tr>
<tr class="even">
<td><strong>browser.padding</strong></td>
<td>Padding around the widget when displayed in a standalone browser (defaults to 40 pixels).</td>
</tr>
<tr class="odd">
<td><strong>browser.fill</strong></td>
<td>When displayed in a standalone web browser, automatically size the widget to the browser dimensions (note that browser.padding is still applied). Defaults to FALSE.</td>
</tr>
<tr class="even">
<td><strong>browser.external</strong></td>
<td>When displaying in a browser, always use an external browser (via <code>browseURL()</code>). Defaults to <code>FALSE</code>, which will result in the use of an internal browser within RStudio v1.1 and higher.</td>
</tr>
<tr class="odd">
<td><strong>knitr.defaultWidth</strong></td>
<td>The default width used to display the widget within documents generated by knitr (e.g. R Markdown).</td>
</tr>
<tr class="even">
<td><strong>knitr.defaultHeight</strong></td>
<td>The default height used to display the widget within documents generated by knitr (e.g. R Markdown).</td>
</tr>
<tr class="odd">
<td><strong>knitr.figure</strong></td>
<td>Apply the default knitr fig.width and fig.height to the widget when it’s rendered within R Markdown documents. Defaults to TRUE.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="javascript-resize-method" class="section level2">
<h2>JavaScript resize method</h2>
<p>Specifying a sizing policy allows htmlwidgets to calculate the width and height of your widget based on where it’s being displayed. However, you still need to forward this sizing information on to the underlying JavaScript library you are creating a widget for.</p>
<p>Every JavaScript library handles dynamic sizing a bit differently. Some do it automatically, some have a resize() call to force a layout, and some require that size be set only along with data and other options. Whatever the case, the <strong>htmlwidgets</strong> framework will pass the computed sizes to both your <code>factory</code> function and <code>resize</code> function. Here’s an empty JavaScript binding that illustrates:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="va">HTMLWidgets</span>.<span class="at">widget</span>(<span class="op">{</span></a>
<a class="sourceLine" id="cb4-2" data-line-number="2"></a>
<a class="sourceLine" id="cb4-3" data-line-number="3">  <span class="dt">name</span><span class="op">:</span> <span class="st">&quot;demo&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb4-4" data-line-number="4">  </a>
<a class="sourceLine" id="cb4-5" data-line-number="5">  <span class="dt">type</span><span class="op">:</span> <span class="st">&quot;output&quot;</span><span class="op">,</span></a>
<a class="sourceLine" id="cb4-6" data-line-number="6">  </a>
<a class="sourceLine" id="cb4-7" data-line-number="7">  <span class="dt">factory</span><span class="op">:</span> <span class="kw">function</span>(el<span class="op">,</span> width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb4-8" data-line-number="8">  </a>
<a class="sourceLine" id="cb4-9" data-line-number="9">    <span class="cf">return</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb4-10" data-line-number="10">      <span class="dt">renderValue</span><span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb4-11" data-line-number="11">      </a>
<a class="sourceLine" id="cb4-12" data-line-number="12">      <span class="op">},</span></a>
<a class="sourceLine" id="cb4-13" data-line-number="13">      </a>
<a class="sourceLine" id="cb4-14" data-line-number="14">      <span class="dt">resize</span><span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb4-15" data-line-number="15">        </a>
<a class="sourceLine" id="cb4-16" data-line-number="16">      <span class="op">}</span></a>
<a class="sourceLine" id="cb4-17" data-line-number="17">    <span class="op">};</span></a>
<a class="sourceLine" id="cb4-18" data-line-number="18">  <span class="op">}</span></a>
<a class="sourceLine" id="cb4-19" data-line-number="19"><span class="op">}</span>)<span class="op">;</span></a></code></pre></div>
<p>What you do with the passed width and height is up to you and depends on the re-sizing semantics of the underlying JavaScript library you are creating a widget for. A couple of illustrative examples are included in the next section.</p>
<div id="examples-1" class="section level3">
<h3>Examples</h3>
<div id="dygraphs" class="section level4">
<h4>dygraphs</h4>
<p>In the <a href="http://rstudio.github.io/dygraphs">dygraphs</a> widget the implementation of re-sizing is relatively simple since the <strong>dygraphs</strong> library includes a resize() method to automatically size the graph to it’s enclosing HTML element:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb5-1" data-line-number="1">resize<span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb5-2" data-line-number="2">  <span class="cf">if</span> (dygraph)</a>
<a class="sourceLine" id="cb5-3" data-line-number="3">    <span class="va">dygraph</span>.<span class="at">resize</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb5-4" data-line-number="4"><span class="op">}</span></a></code></pre></div>
</div>
<div id="forcenetwork" class="section level4">
<h4>forceNetwork</h4>
<p>In the <a href="http://christophergandrud.github.io/networkD3/#force">forceNetwork</a> widget, the passed width and height are applied to the <code>&lt;svg&gt;</code> element that hosts the d3 network visualization, as well as forwarded on to the underlying d3 force simulation object:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode javascript"><code class="sourceCode javascript"><a class="sourceLine" id="cb6-1" data-line-number="1">factory<span class="op">:</span> <span class="kw">function</span>(el<span class="op">,</span> width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb6-2" data-line-number="2"></a>
<a class="sourceLine" id="cb6-3" data-line-number="3">  <span class="co">// instance data</span></a>
<a class="sourceLine" id="cb6-4" data-line-number="4">  <span class="kw">var</span> el <span class="op">=</span> el<span class="op">;</span></a>
<a class="sourceLine" id="cb6-5" data-line-number="5">  <span class="kw">var</span> force <span class="op">=</span> <span class="va">d3</span>.<span class="va">layout</span>.<span class="at">force</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb6-6" data-line-number="6"></a>
<a class="sourceLine" id="cb6-7" data-line-number="7">  <span class="va">d3</span>.<span class="at">select</span>(el).<span class="at">append</span>(<span class="st">&quot;svg&quot;</span>)</a>
<a class="sourceLine" id="cb6-8" data-line-number="8">    .<span class="at">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> width)</a>
<a class="sourceLine" id="cb6-9" data-line-number="9">    .<span class="at">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> height)<span class="op">;</span></a>
<a class="sourceLine" id="cb6-10" data-line-number="10">      </a>
<a class="sourceLine" id="cb6-11" data-line-number="11">  <span class="cf">return</span> <span class="op">{</span></a>
<a class="sourceLine" id="cb6-12" data-line-number="12">    <span class="dt">renderValue</span><span class="op">:</span> <span class="kw">function</span>(x) <span class="op">{</span></a>
<a class="sourceLine" id="cb6-13" data-line-number="13">      <span class="co">// implementation excluded</span></a>
<a class="sourceLine" id="cb6-14" data-line-number="14">    <span class="op">},</span></a>
<a class="sourceLine" id="cb6-15" data-line-number="15">      </a>
<a class="sourceLine" id="cb6-16" data-line-number="16">    <span class="dt">resize</span><span class="op">:</span> <span class="kw">function</span>(width<span class="op">,</span> height) <span class="op">{</span></a>
<a class="sourceLine" id="cb6-17" data-line-number="17">         </a>
<a class="sourceLine" id="cb6-18" data-line-number="18">      <span class="va">d3</span>.<span class="at">select</span>(el).<span class="at">select</span>(<span class="st">&quot;svg&quot;</span>)</a>
<a class="sourceLine" id="cb6-19" data-line-number="19">        .<span class="at">attr</span>(<span class="st">&quot;width&quot;</span><span class="op">,</span> width)</a>
<a class="sourceLine" id="cb6-20" data-line-number="20">        .<span class="at">attr</span>(<span class="st">&quot;height&quot;</span><span class="op">,</span> height)<span class="op">;</span></a>
<a class="sourceLine" id="cb6-21" data-line-number="21"></a>
<a class="sourceLine" id="cb6-22" data-line-number="22">      <span class="va">force</span>.<span class="at">size</span>([width<span class="op">,</span> height]).<span class="at">resume</span>()<span class="op">;</span></a>
<a class="sourceLine" id="cb6-23" data-line-number="23">    <span class="op">}</span></a>
<a class="sourceLine" id="cb6-24" data-line-number="24">  <span class="op">};</span></a>
<a class="sourceLine" id="cb6-25" data-line-number="25"><span class="op">}</span></a></code></pre></div>
<p>As you can see, re-sizing is handled in a wide variety of fashions in different JavaScript libraries. The <code>resize</code> method is intended to provide a flexible way to map the automatic sizing logic of <strong>htmlwidgets</strong> directly into the underlying library.</p>
</div>
</div>
</div>

</div>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});

</script>

</body>
</html>