在d3.js中在形状中显示表格的问题
Problems displaying table inside a shape in d3.js
我想在矩形内放置一个表格来显示一块土地的温度信息。
问题是表格没有显示,当我检查浏览器时,我可以在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/
相关文章:
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Chrome's表格布局:修复了更改表格宽度后无法正常工作的问题
- 角度 ng 重复以创建表格问题
- 将表格导出为CSV字符串格式问题到单独的单元格中
- preventDefault问题.提交表格
- 表格图像表格对齐问题
- 维基百科表格解析,循环问题
- 使用angularjs编辑和保存表格时出现CRUD问题
- 表格提交问题在我的页面
- 部分表格没有显示问题
- 如何制作一个表格,一次显示3个问题
- 清算表格问题
- 在d3.js中在形状中显示表格的问题
- 表格td标签中弹出窗口提示的问题
- Google-app-script:在电子表格中使用单元格行[]的javascript电子邮件正文中的日期格式问题
- 导出HTML表格到Excel的问题
- 我没有'I don’我不知道;It’联系表格有问题
- 两个问题,如何在html中创建调查结果页面?以及我如何保存用户输入从表格在excel
- HTML表格与rowspan重新排序项目拖放问题