在D3圆包装布局中的嵌套圆的工具提示 [英] Tooltips for nested circles in D3 circle pack layout

问题描述

我在这里撞我的头。我想在结构中显示叶节点的工具提示，例如可缩放包布局。叶节点是棕色的。如果我使用工具提示的标准代码：

I'm banging my head here. I want to display tooltips for the leaf nodes in a structure such as Zoomable Pack Layout. The leaf nodes are the brown ones. If I used the standard code for tooltips:

vis.selectAll("circle")
    .data(nodes)
   .enter()
    .append("svg:circle")
    .attr("class", function(d) {
        return d.children ? "parent" : "child";
    })
    .attr("cx", function(d) {
        return d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .on("click", function(d) {
        zoom(node == d ? root : d);
    })
    .append("svg:title")
    .text("test");          \\ Browser uses this for tooltips

我在主圈而不是叶子获得工具提示节点。我试过：

I get tooltips on the primary circles but not on the leaf nodes. I tried:

.append("svg:title")
.text(function(d) {
    if(d.size){return 'test';}
});

...希望只有当叶节点包含的可变元素存在时才返回一些东西，父节点显示一个工具提示，但我恐怕它所做的是允许一个隐藏的工具提示静静地防止任何显示。

...hoping that by returning something only when a varaible contained by leaf nodes is present may prevent the parent nodes from showing a tooltip but I'm afraid all it did was allow a hidden tooltip taht silently prevents anything from displaying.

任何想法？我想我需要堆叠svg：圈子，使叶子节点在其他人的前面或附加svg：标题只有叶节点，但我不知道该怎么做。

Any thoughts? I figure I either need to stack the svg:circles so that the leaf nodes are in front of the others or attach svg:titles only to the leaf nodes but I'm not sure how to do that.

这里是一个工具提示的小提琴：
小提琴

Here is a fiddle of the tooltips: Fiddle

推荐答案

问题其实不是代码，圆从接收指针事件。只需删除

The problem is in fact not the code, but the CSS that prevents the leaf node circles from receiving pointer events. Simply remove

circle.child {
  pointer-events: none;
}

完整示例此处。

这篇关于在D3圆包装布局中的嵌套圆的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！