在 D3.js div append 的项目符号列表中显示关键字答案

【问题标题】：display keywords in a bullet point list in D3.js div append在 D3.js div append 的项目符号列表中显示关键字
【发布时间】：2016-12-01 14:32:49
【问题描述】：

我想在每个节点上的鼠标悬停工具提示中将 json 中的逗号分隔值显示为列表。目前我有：

div.append("div") 
.attr("class", "tooltip")
.style("opacity", 1)
.html("Node name : " + d.NodeName + "<br>" + "Keywords list: " + d.keywords)

这是我在 json 文件中的关键字：

"keywords":["one","two","three"]

问题是： 如何在带有项目符号的列表中显示它：

Node Name : Test Name
Keywords List :
    * one
    * two
    * three

目前只有一行，关键字仅以逗号分隔。

【问题讨论】：

你的问题是什么？
@altocumulus 我强调了这个问题。
循环遍历数组附加列表项。
@DBS 能否请您提供一个答案，我是新手，犹豫了很多。
@marcel 如果您真的想利用 D3 的潜力，我建议您深入了解整个 D3 中使用的data binding 概念。谈到 D3 显式循环几乎总是一个坏主意。阅读文档和其中链接的示例应该会让您朝着正确的方向开始。

【解决方案1】：

未经测试，因为我看不到您的完整解决方案，但您应该能够通过循环遍历数组来构建基本列表结构：

var keywordList = "<ul>";
for(var i = 0; i < d.keywords.length; i++){
  keywordList += "<li>" + d.keywords[i] + "</li>";
}
keywordList += "</ul>";

然后在设置 HTML 时在末尾添加 keywordList，而不是 d.keywords：

.html("Node name : " + d.NodeName + "<br>" + "Keywords list: " + keywordList)

【讨论】：