在D3.js处理的JSON数据中使用HTML标记_Html_Json_D3.js_Tags

在D3.js处理的JSON数据中使用HTML标记

html json d3.js tags

在D3.js处理的JSON数据中使用HTML标记,html,json,d3.js,tags,Html,Json,D3.js,Tags,我正在尝试使用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">&

我正在尝试使用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>

原则上，只要我使用纯文本，一切都很好。不幸的是 HTML标记会被修改。例如“>”变为“_gt；”（&而不是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。

这是所有正在更改的标记吗？或者仅仅是某些人？你能给你的帖子添加一个输出的例子吗？非常感谢。这立刻解决了我的问题。现在的输出与预期一致。谢谢你提到可能的虐待。事实上，我必须编辑很多表，在JSON通知和解析JSON数据中编辑要容易得多。

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
    })