d3 - 在svg元素上渲染html表格

Question

我想用d3動態創建html表格。他們需要可拖動並使用其他svg功能，因此需要在svg元素中創建它們。由於svg不允許使用表格，因此我在外部對象內創建了表格。我無法首先寫出html模板，因爲我不知道數據中會傳遞多少行/列等。我有HTML部分工作，但它是不是讓我把它轉換成使用正確的格式「XHTML：元素」：

​​

這裏是樣本數據集我測試了用：

scope.movies = [ 
      { title: "The Godfather", year: 1972, length: 175, 
       budget: 6000000, rating: 9.1 }, 
      { title: "The Shawshank Redemption", year: 1994, 
       length: 142, budget: 25000000, rating: 9.1 }, 
      { title: "The Lord of the Rings 3", year: 2003, 
       length: 251, budget: 94000000, rating: 9 } 
     ]; 
     scope.columns = [ 
      { head: 'Movie title', cl: 'title', html: function (d) { return d.title; } }, 
      { head: 'Year', cl: 'center', html: function (d) { return d.year; } }, 
      { head: 'Length', cl: 'center', html: function (d) { return d.length; } }, 
      { head: 'Budget', cl: 'num', html: function (d) { return d.budget; } }, 
      { head: 'Rating', cl: 'num', html: function (d) { return d.rating; } } 
     ]; 

目前使用這種格式，我收到錯誤： '''''無法執行'querySelectorAll'：'xhtml：th'不是一個有效的選擇器。

Answer 1

我沒有很好的理由，爲什麼.selectAll('xhtml:td')不工作可能是這不支持。

但我想下面和它的工作共享的思想與你：

var table = svg.append("foreignObject") 
    .attr("width", 480) 
    .attr("height", 500) 
    .append("xhtml:body")//append body to foreign object(this is missing in your code) 

然後，你可以簡單地添加元素如您使用D3做像下面。

table.append("table") 
    // append header row 
table.append('thead').append('tr') 
    .selectAll('th')//select using normal selector without xhtml 
    .data(scope.columns).enter() 

工作代碼here

希望這有助於！