0

我需要为每个位置节点添加标签，以便为鼠标悬停和单击事件设置样式。

示例图片在这里

检查此代码笔示例以获取我到目前为止编写的代码。

// 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>了几种方法，但无法获得输出。

4

0 回答 0