在新窗口上使用d3.js

Use d3.js on a new window

本文关键字：d3 js 新窗口 窗口      更新时间：2023-09-26

打开新窗口时是否可以使用d3.js？例如，我正在尝试：

new_window = window.open("userpage.html");
new_window.document.write("<html><body>");
new_window.document.write("<table id='"usertable'">");
new_window.document.write("</table>");
new_window.document.write("</body></html>");    
table = d3.select("#usertable");
console.log(table);
var thead = table.append("thead");
var tbody = table.append("tbody");
var columns = ["dataset"];
thead.append("tr")
    .selectAll("th")
    .data(columns)
    .enter()
    .append("th")
    .text(function(column) { console.log(column); return column; });

它不起作用，第一个控制台.log的输出是

[
Array[1]
0: null
length: 1
parentNode: HTMLHtmlElement
__proto__: Array[0]
]

我认为0: null不好。

这里有几个问题：

  • 我认为你打开新窗口的方式不正确——通常，你要么打开一个包含内容的URL，要么使用""作为URL并将内容写入一个空白窗口。打开像"usertable.html"这样的URL，然后编写<html><body>是没有意义的。最后，即使有一个空白窗口，也不需要编写<html><body>——默认情况下，浏览器通常会提供这些节点。

  • 默认情况下，使用d3.select将在当前文档中查找。为了访问新打开的窗口的主体，您需要传入new_window.document——事实上，您需要传递new_window.document.body，因为如果没有HIERARCHY_REQUEST_ERROR，就无法向document附加任何内容。

  • 我也不认为把D3和document.write混合在一起是个好主意。D3选择DOM中的节点，按照您现在的代码，在您尝试选择table之前，我不认为它实际上是一个格式良好的节点。D3非常擅长插入新的DOM节点-请使用它。

把所有这些放在一起会产生这样的结果：

var newWindow = window.open('');
var newWindowRoot = d3.select(newWindow.document.body);
// now do some writing with D3
var data = [
    { foo: "Foo 1", bar: "Bar 1" },
    { foo: "Foo 2", bar: "Bar 2" }
];
var table = newWindowRoot.append('table');
var rows = table.selectAll('tr')
    .data(data);
rows.enter().append('tr');
var cells = rows.selectAll('td')
    .data(function(d) { return d3.entries(d); });
cells.enter().append('td');
cells.text(function(d) { return d.value; });

工作示例：http://jsfiddle.net/nrabinowitz/gQf7J/

相关文章：