在D3.js处理的JSON数据中使用HTML标记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在D3.js处理的JSON数据中使用HTML标记相关的知识,希望对你有一定的参考价值。
我正在尝试使用D3.js基于JSON数据构建表。我的示例html文件是:
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</head>
<body>
<table id="muell"></table>
<script type='text/javascript' src='script.js'></script>
<script>
var intern_data = [{
Proton: "A",
Multiplett: "dd",
Formel: "<sup>1</sup>H<sub>3</sub>"
},
{
Proton: "B",
Multiplett: "dq",
Formel: "<sup>1</sup>C<sub>3</sub>"
}
];
var spalten = ['Proton', 'Multiplett', 'Formel'];
tabulate("#muell", intern_data, spalten);
</script>
</body>
</html>
Javascript从bl.ocks.org中被盗,并且稍微修改了一下以将新表格内容添加到预先格式化的区域中。
var tabulate = function (table_id,data, columns) {
var table = d3.select(table_id)
var thead = table.append('thead')
var tbody = table.append('tbody')
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(function (d) {
return d
})
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr')
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
return {
column: column,
value: row[column]
}
})
})
.enter()
.append('td')
.text(function (d) {
return d.value
})
return table;
}
原则上,只要我使用纯文本,一切正常。不幸的是HTML标签被修改了。例如“>”变成“_gt;” (&而不是_,不能在这里使用它,否则表达式变为“>”:-))。我试图使用来保持纯HTML,但这似乎不起作用。
答案
d3有两个函数,text
和html
。如果要输出html,可以使用html
函数代替:
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
return {
column: column,
value: row[column]
}
})
})
.enter()
.append('td')
.html(function (d) {
return d.value
})
但要小心,如果值不是来自受信任的来源,这是危险的 - 因为用户可能能够注入恶意HTML。
以上是关于在D3.js处理的JSON数据中使用HTML标记的主要内容,如果未能解决你的问题,请参考以下文章