Я пытаюсь построить таблицы на основе данных JSON, используя D3.js.
Мой пример 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, но, похоже, это не сработало.