在svg中从JSON数据创建表格并不会显示

Question

下面是我的代码，表格不可见。浏览器渲染时我看不到它。但是在chrome developer工具中，元素已经创建。

HTML

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

JS

    function svgTable(data){
        var pair = d3.keys(data[0])

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

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

        d3.select("table")
          .selectAll("tr.data")
          .data(data).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})
    }

    // var data = {"ABC":true,"XYZ":"False","Type":"all","ABC":true,"XYZ":"False","Type":"all"};

    d3.json("data.json", function(error,data){
        svgTable(data)
    })

我做错了什么？我正在使用foreignObject，也没有在IE中使用它。我是最新的谷歌浏览器。

Answer 1

var pair = d3.keys（data [0]）应该是var pair = d3.keys（data）。数据对象中没有0元素。 @peter

有效

Answer 2

var pair = d3.keys(data[0])应为var pair = d3.keys(data)。