d3.js - 为什么我不能让这个 PJAX 示例工作？

Question

本页演示了如何在 d3 中使用 PJAX 加载外部 html 文件： https ://gist.github.com/mbostock/1367999

我已经复制了这个： https ://dl.dropboxusercontent.com/u/1531353/Misc/Docudocker/trialpjax/trial.html

但是，我的版本不工作。当我点击一个链接（而不是将 html 加载到页面上）时，我收到一个 DOM 错误。我曾尝试使用 Chrome 控制台找出导致 DOM 错误的确切原因，但无济于事。有什么我忘记复制的吗？

Answer 1

加载pjax("ul li a", "#main");时content变量设置为“#main”

所以，在这个函数中：

function load(href) {
    d3.html(href, function(fragment) {
      var target = d3.select(content).node();
      target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target);
      pjax(links, content); // reapply
    });
  }

在行中：

target.parentNode.replaceChild(d3.select(fragment).select(content).node(), target);

#main它正在加载的文档片段中寻找 , 的内容。

但是，在您的情况下，没有#main，因此它被设置为空。当您尝试使用 null 调用 replaceChild 时，您会遇到遇到的错误。

要修复它，请像他所做的那样设置您的其他页面，#main每个页面都有一个。