- Utilize bullet points to exhibit keywords within a D3.js div by appending them

Question

I'm looking to showcase the comma-separated values from a JSON file as a list in a mouseover tooltip on each node. Here is my current code snippet:

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

Here are the keywords in my JSON file:

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

My question is: How can I display these keywords in a bulleted list like this:

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

Currently, the keywords are displayed in one line separated by commas only.

Answer 1

Answer №1

Not tested due to lack of visibility into the full solution, but creating a simple list structure can be achieved by iterating through the array:

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

Subsequently, append the keywordList at the end when setting the HTML content, instead of using d.keywords:

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

Answer 2

Not tested due to lack of visibility into the full solution, but creating a simple list structure can be achieved by iterating through the array:

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

Subsequently, append the keywordList at the end when setting the HTML content, instead of using d.keywords:

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