在d3.js中显示表格内形状的问题

我想在矩形内放一张表格来显示有关土地温度的信息。在d3.js中显示表格内形状的问题

问题是表格不显示，当我检查我的浏览器时，我可以在HTML代码中看到表格。

在这Jsfiddle，我已经把代码显示出我想要做的。

我不知道我是否做错了什么，我是d3.js新手。

这是我用来制作表格的一些代码。

var margin = {top: 25, right: 15, bottom: 50, left: 55}, 
    width  = 500 - margin.left - margin.right, 
    height  = 250 - margin.top - margin.bottom; 

    var svgContainer = d3.select(".dashboard") 
      .append("div") 
      .attr("class", "col-lg-6") 
      .append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


    svgContainer.append("rect") 
      .attr("x", 10) 
      .attr("y", 10) 
      .attr("width", width) 
      .attr("height", height) 
      .style("stroke", "#B5B5B5") 
      .style("fill", "none") 
      .style("stroke", 1); 

    svgContainer.append('svg:foreignObject') 
      .attr('font-family', 'FontAwesome') 
      .attr("x", 40) 
      .attr("y", 25) 
      .attr('font-size', '100px') 
      .html(function(d){ 
      return "<i class='fa fa-sun-o' id='imageTemp'></i>"; 
      }); 

    svgContainer.append("rect") 
      .attr("x", 160) 
      .attr("y", 40) 
      .attr("width", 250) 
      .attr("height", 120) 
      .attr("fill", "#D8D8D8"); 

    var table = svgContainer.append("table") 
      .attr("class", "table-bordered"); 

    table.append("thead") 
      .selectAll("th") 
      .data(data) 
      .enter() 
      .append("th") 
      .text(function(d){ 
      return "Week "+d.week; 
      }); 

    table.append("tbody") 
      .append("tr") 
      .selectAll("td") 
      .data(data) 
      .enter() 
      .append("td") 
      .text(function(d){ 
      return d.temperature; 
      }); 


    svgContainer.append("text") 
      .attr("x", (width/2))    
      .attr("y", 0 - (margin.top/2)) 
      .attr("text-anchor", "middle") 
      .attr("class", "title") 
      .text('TEMPERATURE - '+data[0].land);

我欣赏一些帮助，你可以给我，谢谢！

来源

2016-09-19 Fabian Sierra

我不认为SVG元素接受''

。您必须将表格定位为SVG元素上方的叠加层。 – Terry

我正在查看信息，它确实！我试图定位但我无法做到 –

我要检查出来，谢谢！ –

回答

为了在SVG中使用像<table>这样的HTML元素，它需要位于<foreignObject>之内（就像您使用FontAwesome元素一样）。

var table = svgContainer.append("svg:foreignObject") 
      .attr("x", 160) 
      .attr("y", 40) 
      .attr("width", 250) 
      .attr("height", 120) 
      .append("xhtml:body") 
      .append("table") 
      .attr("class", "table-bordered");

看到这个分叉的小提琴：https://jsfiddle.net/qogxmwov/1/

来源

2016-09-19 21:03:04 MatthewG

非常感谢，我感谢你！ :) –

在d3.js中显示表格内形状的问题

回答

相关问题