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

Problems displaying table inside a shape in d3.js

本文关键字:表格 问题 显示 d3 js      更新时间:2023-09-26

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

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

在这个jsp中,我放置了代码来显示我想要做的事情。

我不知道我是否做错了什么,我是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);
我很感激你能给我的一些帮助,谢谢!

为了在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/