使用d3通过id向svg追加表格

下面是我的代码，表格不显示出来。使用Chrome的开发人员/元素显示元素已创建，但在浏览器渲染时我看不到它。数据是正确的，因为元素显示在开发人员/元素下。使用d3通过id向svg追加表格

<svg id="abc" width="100%" height="100%" 
      viewBox="-20 -20 800 800" 
      preserveAspectRatio="none"></svg> 

function createSpreadsheet(incData){ 
var keyValues = d3.keys(incData[0]) 

    d3.select("#abc") 
    .append("table") 

    d3.select("table") 
    .append("tr") 
    .attr("class", "head") 
    .selectAll("th") 
    .data(keyValues) 
    .enter() 
    .append("th") 
    .html(function (d) {return d}) 

    d3.select("table") 
    .selectAll("tr.data") 
    .data(incData).enter() 
    .append("tr") 
    .attr("class", "data") 

    d3.selectAll("tr") 
    .selectAll("td") 
    .data(function(d) {return d3.entries(d)}) 
    .enter() 
    .append("td") 
    .html(function (d) {return d.value}) 
} 
d3.json("data.json", function(error,data){ 

createSpreadsheet(data) 

)} 


data=[{'A':'123', 'B':'456'}, {'A':'321', 'B':'654'}]

来源

2016-07-08 DataDataData

您的表格将永远不会显示。你*不能*追加任何HTML标签（div，h1，p，table等）到SVG（除非使用foreignObject）。开发工具将显示这些元素，因为它会保留*任何*元素。试试这个：'d3.select（“＃abc”）。append（“dolphin”）;'。你会看到''，这是没有意义的。 –

在函数'createSpreadsheet'中，尝试'd3.select（“body”）'或任何其他HTML div，并且您的表格可能会显示出来。 –

我认为@GerardoFurtado你应该将其作为答案，想知道为什么它的评论。 – Cyril

您需要创建SVG里面有异物，以能够插入表到它...

这样做是为了创建一个异物乌尔SVG内，然后添加表到该对象

var table = d3.select("#abc") 
    .append("foreignObject") 
    .attr("width", 500) 
    .attr("height", 500) 
    .append("xhtml:table"); 

table.append("tr") 
    .attr("class", "head") 
    .selectAll("th") 
    .data(keyValues) 
    .enter() 
    .append("th") 
    .html(function (d) {return d})

来源

2016-07-08 05:23:15

这不适用于Internet Explorer。我建议OP将表追加到其他HTML元素。 –

是的..这不适用于IE。不知道这是否是一项要求。否则...这是可行的，并在所有主流浏览器上都支持。 –

使用d3通过id向svg追加表格

回答

相关问题