将 html 代码添加到 D3 文本

Question

我正在尝试使用 D3 将 link 添加到我的字符串中。我正在构建一个列表，但我也想提供从该列表中删除项目的可能性。这是代码：

            for (i in comparison) {
            var t = d3.select("#comparison")
                    .select("ul")
                    .append("li")
                    .text('<a onClick="removeItemComparison(' + i + ')">[X]</a> | ' + comparison[i].properties.BCNAAM);
                  }

但是，代码没有显示可点击的 link，而是作为字符串添加。

我试过搜索，但不确定要使用什么搜索词。提前致谢！

Answer 1

要将 html 代码添加到选择中，请使用 selection.html()。另见 https://github.com/mbostock/d3/wiki/Selections#html

Answer 2

您可能正在寻找的是 selection.on() 方法。您可以使用此方法为您的项目分配事件侦听器，然后它可以为您处理删除。

所以，而不是...

.text('<a onClick="removeItemComparison(' + i + ')">[X]</a> | ' + comparison[i].properties.BCNAAM);

你会做一些更接近...

.on('click', function(i) { ...doStuffHere })

可在此处找到包含 on() 方法详细信息的 API 参考页，https://github.com/mbostock/d3/wiki/Selections#on

我之前没有发现自己需要将 html 文本直接插入到我的 D3 代码中，因此我无法在这方面提供太多帮助。

希望对您有所帮助！

将 html 代码添加到 D3 文本

Adding html code to D3 text

javascript

d3.js