javascript - 在 d3.js 中显示形状内的表格时出现问题

Question

这个问题已经有答案了:

Create a table in SVG (7 个回答)

已关闭 6 年前。

我想在矩形内放置一个表格来显示有关土地温度的信息。

问题是表格不显示，当我检查浏览器时，我可以在 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);

非常感谢您能给我一些帮助，谢谢!

Answer 1

为了使用像 <table> 这样的 HTML 元素在 SVG 中，它需要位于 <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");

看看这个 fork 的 fiddle :https://jsfiddle.net/qogxmwov/1/