Accepted answer

The datum of each <div> is an object, and you're trying to pass the whole object to the text() method, hence the result you're seeing.

The best idea is dealing with the object inside the text() method, specifying exactly what you want to show (keys and values), and how. Meanwhile, a very simple and naive solution is this:

.text(function (d, i) { 
    return Object.entries(d)[0].join(": ");

Here is the forked JSFiddle:


You could do:

return `${Object.keys(d)[0]}: ${d[Object.keys(d)[0]]}`

Instead of:

return d

In your showToolTip function

You get this error (which is expected behaviour) because you're returning the full Object instead of a String.



  function showToolTip(selectedNode) {
        tooltip.transition().duration(200).style('visibility', 'visible')
            .style('position', 'absolute').style('left', (d3.event.pageX) - 15 + 'px').style('top', (d3.event.pageY - 10) + 'px');
        tooltip.append('div').text(`Item: ${}`);
        tooltip.append('div').text(`Item Id: ${}`);
        tooltip.append('div').text(`Status: Normal`);
        tooltip.append('div').text(`Supplier: Supplier1`);

Related Query

More Query from same tag