无法在带有 d3.js 的气泡图中显示工具提示

Question

我使用以下示例作为模板来创建气泡图(https://bl.ocks.org/john-guerra/0d81ccfd24578d5d563c55e785b3b40a(。每次鼠标悬停在特定圆圈时，我都尝试显示工具提示，但由于某种原因它似乎不起作用。我还想将圆圈内的文字更改为白色，但到目前为止我没有成功。

下面是 JSON 文件的示例：

 {
            "name": "POR",
            "children": [{
                    "name": "Clyde Drexler",
                    "size": 18040,
                    "color": "#D00328"
                },
                {
                    "name": "Damian Lillard",
                    "size": 12909,
                    "color": "#D00328"
                },
$(document).ready(function() {
    let diameter = 750;
    let format = d3.format(",d");
    let color = d3.scaleOrdinal(d3.schemeCategory20c);
    let bubble = d3.pack()
        .size([diameter, diameter])
        .padding(1.5);
    let svgContainer = d3.select("#data-visualisation");
    // Append <svg> to body
    let svg = svgContainer.append('svg')
        .attr('width', diameter)
        .attr('height', diameter)
        .attr("align", "center")
        .attr('class', 'bubble');
    // Read the data
    d3.json("data/flare.json", function(error, data) {
        // error scenario
        if (error) throw error;
        let root = d3.hierarchy(classes(data))
            .sum(function(d) {
                return d.value;
            })
            .sort(function(a, b) {
                return b.value - a.value;
            });
        bubble(root);
        //////////////
        // tooltip
        //////////////
        //Create a tooltip div that is hidden by default:
        let tooltip = svgContainer
            .append("div")
            .style("opacity", 0)
            .attr("class", "tooltip")
            .style("background-color", "black")
            .style("border-radius", "5px")
            .style("padding", "10px")
            .style("color", "white");
        // Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
        let showTooltip = function(d) {
            tooltip
                .transition()
                .duration(200)
            tooltip
                .style("opacity", 1)
                .html("Player: " + d.data.className + "<br> Points with franchise: " + d.data.value)
                .style("left", (d3.mouse(this)[0] + 30) + "px")
                .style("top", (d3.mouse(this)[1] + 30) + "px");
        }
        let moveTooltip = function(d) {
            tooltip
                .style("left", (d3.mouse(this)[0] + 30) + "px")
                .style("top", (d3.mouse(this)[1] + 30) + "px");
        }
        let hideTooltip = function(d) {
                tooltip
                    .transition()
                    .duration(200)
                    .style("opacity", 0);
            }
            //////////////
        let node = svg.selectAll(".node")
            .data(root.children)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        node.append("title")
            .text(function(d) {
                return d.data.className + ": " + format(d.data.value);
            });
        node.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .style("fill", function(d) {
                return d.data.color;
            })
            .style("stroke", "none")
            // trigger tooltip functions
            .on("mouseover", showTooltip)
            .on("mousemove", moveTooltip)
            .on("mouseleave", hideTooltip);
        node.append("text")
            .attr("dy", "0.3em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.className.substring(0, d.r / 3.8);
            });
    });
    function classes(root) {
        let classes = [];
        function recurse(name, node) {
            if (node.children) {
                node.children.forEach(function(child) {
                    recurse(node.name, child);
                });
            } else {
                classes.push({
                    packageName: name,
                    className: node.name,
                    value: node.size,
                    color: node.color
                });
            }
        }
        recurse(null, root);
        return {
            children: classes
        };
    }

    d3.select(self.frameElement)
        .style("height", diameter + "px");
});

Answer 1

这是我刚刚使用块和工具提示中的代码制作的小提琴。

您输入的代码中有几个错误。

1. 工具提示div被附加到 SVG 中，这是不正确的，SVG 不能包含"div"，将其更改为：

var tooltip = d3.select('body') .append("div") .style("opacity", 0)

使工具提示正常工作。

2. 然后，工具提示样式中缺少position: absolute

3. 最后，工具提示中的left和top样式仅基于气泡，因此我将翻译添加到这些坐标中

，如下所示：

.style("left", (d.x + (d3.mouse(this)[0] + 30)) + "px") .style("top", (d.y + (d3.mouse(this)[1] + 30)) + "px");