marcel marcel - 8 months ago 44
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:

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

here is my keywords in json file:


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.

Answer Source

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)