在 D3.js 处理的 JSON 数据中使用 HTML 标签答案

【问题标题】：Using HTML tags in JSON data processed by D3.js在 D3.js 处理的 JSON 数据中使用 HTML 标签
【发布时间】：2018-09-04 13:58:31
【问题描述】：

我正在尝试使用 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，但这似乎不起作用。

【问题讨论】：

所有这些标签都在改变吗？还是只是某些？你能在你的帖子中添加一个输出示例吗？

标签： html json d3.js tags

【解决方案1】：

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。

【讨论】：

非常感谢。这立即解决了我的问题。现在的输出符合预期。感谢您提及可能的滥用行为。实际上我必须编辑很多表，并且在 JSON 通知和解析 JSON 数据中更容易做到这一点。