d3.js - 无法在旋转集群布局上显示工具提示

Question

我无法显示此图的工具提示：http: //mbostock.github.io/d3/talk/20111018/cluster.html

我尝试了最简单的方法但没有成功：

node.append("svg:title").text(function(d) { return d.key; });

并且也尝试过但没有成功：

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

node.append("svg:circle")
    .attr("r", 3)
    .on("mouseover", function (d) {
        div.transition()
            .duration(0)
            div.style("opacity", 1)
            div.html(d.key)
            .style("width", d.key.length + "mm")
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");
    })
    .on("mouseout", function (d) {
        div.transition()
            .duration(0)
            .style("opacity", 0);
    });

这是完整的代码：

var w = 1280,
    h = 800,
    rx = w / 2,
    ry = h / 2,
    m0,
    rotate = 0;
var cluster = d3.layout.cluster()
    .size([360, ry - 120])
    .sort(null);
var diagonal = d3.svg.diagonal.radial()
    .projection(function (d) {
    return [d.y, d.x / 180 * Math.PI];
});
var svg = d3.select("body").append("div")
    .style("width", w + "px")
    .style("height", w + "px");
var vis = svg.append("svg:svg")
    .attr("width", w)
    .attr("height", w)
    .append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");
vis.append("svg:path")
    .attr("class", "arc")
    .attr("d", d3.svg.arc().innerRadius(ry - 120).outerRadius(ry).startAngle(0).endAngle(2 * Math.PI))
    .on("mousedown", mousedown);

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

function drawNodes(graph) {
    var nodes = cluster.nodes(graph);
    var link = vis.selectAll("path.link")
        .data(cluster.links(nodes))
        .enter().append("svg:path")
        .attr("class", "link")
        .attr("d", diagonal);
    var node = vis.selectAll("g.node")
        .data(nodes)
        .enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function (d) {
        return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";
    })

    node.append("svg:circle")
        .attr("r", 3)
        .on("mouseover", function (d) {
            div.transition()
                .duration(0)
                div.style("opacity", 1)
                div.html(/*"info:" + "<br/>" + */d.key)
                .style("width", d.key.length + "mm")
                //.style("height", "10mm") ???
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function (d) {
            div.transition()
                .duration(0)
                .style("opacity", 0);
        });

    node.append("svg:text")
        .attr("dx", function (d) {
        return d.x < 180 ? 8 : -8;
    })
        .attr("dy", ".31em")
        .attr("text-anchor", function (d) {
        return d.x < 180 ? "start" : "end";
    })
        .attr("transform", function (d) {
        return d.x < 180 ? null : "rotate(180)";
    })
        .text(function (d) {
        return d.name;
    });

    // TODO: does not work...not sure why...mouseover being captured already?
    node.append("svg:title")
        .text(function(d) { return d.key; });
}
//});

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup);

function mouse(e) {
    return [e.pageX - rx, e.pageY - ry];
}

function mousedown() {
    m0 = mouse(d3.event);
    d3.event.preventDefault();
}

function mousemove() {
    if (m0) {
        var m1 = mouse(d3.event),
            dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI,
            tx = "translate3d(0," + (ry - rx) + "px,0)rotate3d(0,0,0," + dm + "deg)translate3d(0," + (rx - ry) + "px,0)";
        svg.style("-moz-transform", tx)
            .style("-ms-transform", tx)
            .style("-webkit-transform", tx);
    }
}

function mouseup() {
    if (m0) {
        var m1 = mouse(d3.event),
            dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI,
            tx = "rotate3d(0,0,0,0deg)";
        rotate += dm;
        if (rotate > 360) rotate -= 360;
        else if (rotate < 0) rotate += 360;
        m0 = null;
        svg.style("-moz-transform", tx)
            .style("-ms-transform", tx)
            .style("-webkit-transform", tx);
        vis.attr("transform", "translate(" + rx + "," + ry + ")rotate(" + rotate + ")")
            .selectAll("g.node text")
            .attr("dx", function (d) {
            return (d.x + rotate) % 360 < 180 ? 8 : -8;
        })
            .attr("text-anchor", function (d) {
            return (d.x + rotate) % 360 < 180 ? "start" : "end";
        })
            .attr("transform", function (d) {
            return (d.x + rotate) % 360 < 180 ? null : "rotate(180)";
        });
    }
}

function cross(a, b) {
    return a[0] * b[1] - a[1] * b[0];
}

function dot(a, b) {
    return a[0] * b[0] + a[1] * b[1];
}

Answer 1

该示例的 CSS 阻止节点捕获指针，从而阻止显示工具提示。如果您删除该行

pointer-events: none;

从 CSS for .node，它工作正常。