D3 Examples - D3 PJAX (& execute JS loaded through the d3.html() request as well)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <body>
    This page was generated at <script type="text/javascript">document.write(new Date()); console.log("main");</script>.
    <div id="main">
      <ul>
        <li><a href="a.html">Anteater</a></li>
        <li><a href="b.html">Baobao</a></li>
        <li><a href="c.html">Cuttlefish</a></li>
      </ul>
      Hello, PJAX!
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
    <script type="text/javascript">
​
pjax("ul li a", "#main");
​
function pjax(links, content) {
  d3.selectAll(links).on("click", function() {
    history.pushState(this.href, this.textContent, this.href);
    load(this.href);
    d3.event.preventDefault();
  });
​
  function load(href) {
    d3.html(href, function(fragment) {
      var target = d3.select(content).node();
      target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target);
      d3.select(content).selectAll('script').each(function() {
        evalScript(this);
      });
      pjax(links, content); // reapply
    });
  }
​
  d3.select(window).on("popstate", function() {
    if (d3.event.state) load(d3.event.state);
  });
}
​
var evalScript = function(node){
  var p, f, id, n = document.createElement("script");
  n.type = "text/javascript";
  n.text = node.innerText;
  f = node.getAttribute('src');
  if (f) n.setAttribute('src', f);
  id = node.getAttribute('id');
  if (id) n.setAttribute('id', id);
  p = node.parentNode;
  p.replaceChild(n, node);
};
​
// Hacky Becky to fake/replace document.write() which will screw you over when you're doing it in XHR loaded+eval()ed code.
d3.selection.prototype.replaceWtext = function(txt) {
  var o = this.node(), p, id, n = document.createElement("span");
  n.textContent = txt;
  id = o.getAttribute('id');
  if (id) n.setAttribute('id', id);
  p = o.parentNode;
  p.replaceChild(n, o);
};
​
    </script>
  </body>
</html>
​
    