marcel marcel - 6 days ago 6
CSS Question

display keywords in a bullet point list in D3.js div append

i want to show the comma separated values from json as a list in my mouseover tooltip on each node. Currently I have:

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


here is my keywords in json file:

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


Question is:
How to display it in a list like this with bullet points:

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


currently it is just in one line and keywords are comma separated only.

DBS DBS
Answer

Untested as I can't see your full solution, but you should be able to build a basic list structure by looping through your array:

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

And then simply add the keywordList on the end when you set the HTML, instead of the d.keywords:

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