Question

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

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

为了在SVG中使用像<foreignObject>这样的HTML元素，它需要位于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");内（就像你使用FontAwesome元素一样）。

mysqldump

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

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

1 个答案: