How to add labels to each location node d3.geo?

Question

I need to add labels for each location node which is possible to style for mouse hover & click events.

Exapmple Image is here

Check this Code Pen sample for the code I wrote so far.

// load and display the world and locations
d3.json(
    "https://gist.githubusercontent.com/d3noob/5193723/raw/world-110m2.json",
    function (error, topology) {
        let world = g
            .selectAll("path")
            .data(topojson.object(topology, topology.objects.countries).geometries)
            .enter()
            .append("path")
            .attr("d", path);

        // add city location circles
        let locations = g
            .selectAll("circle")
            .data(cities)
            .enter()
            .append("circle")
            .attr("cx", function (d) {
                return projection([d.lon, d.lat])[0];
            })
            .attr("cy", function (d) {
                return projection([d.lon, d.lat])[1];
            })
            .attr("r", 10)
            .style("fill", "red")
            .style("opacity", 0.6)
            .attr("id", d => d.code)
            .attr("data-city", d => d.city)
            .attr("data-price", d => d.price)
            .attr("class", "points")
            .on("end", drawLines());
    }
);

I tried <foreignObject> in few ways but couldn't get the output.