在新窗口中使用d3.js

打開新窗口時可以使用d3.js嗎？例如，我想：在新窗口中使用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; });

它不工作，和第一的console.log的輸出中是

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

我覺得0: null不好。

來源

2012-09-11 Ruggero Turra

它是如何不工作？在嘗試在d3中選擇它之前，您可能必須添加結束表標記。 –

@LarsKotthoff：好的，我已經編輯了這個問題，仍然無法正常工作 –

這裏有幾個問題：

我認爲你是不正確打開新窗口 - 通常，你要麼打開一個URL的內容，或者你使用""作爲網址，並撰寫內容進入一個空白窗口。打開一個URL，如"usertable.html"，然後編寫<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/

來源

2012-09-11 21:07:38 nrabinowitz

非常感謝，它的工作原理。 –

在新窗口中使用d3.js

回答

相關問題