Как добавить метки к каждому узлу местоположения d3.geo?

Question

Мне нужно добавить метки для каждого узла местоположения, которые можно стилизовать для событий наведения мыши и щелчка.

Пример изображения здесь

Проверьте этот пример Code Pen на наличие кода, который я написал до сих пор.

// 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());
    }
);

Я старался <foreignObject> несколькими способами, но не смог получить результат.