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

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

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

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

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

使工具提示生效。

然后，工具提示样式中缺少position: absolute
最后，工具提示中的left和top样式仅基于气泡，因此我将平移添加到那些坐标中，例如：
< / li>

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

无法使用d3.js在气泡图中显示工具提示

1 个答案: