javascript - D3 圆包布局中嵌套圆的工具提示

Question

我在这里敲我的头。我想在 Zoomable Pack Layout 等结构中显示叶节点的工具提示.叶节点是棕色的。如果我使用工具提示的标准代码:

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

我在主圆上获得工具提示，但在叶节点上没有。我试过:

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

...希望仅在叶节点包含的变量存在时才返回某些内容可能会阻止父节点显示工具提示，但我担心它所做的只是允许隐藏的工具提示默默地阻止任何显示。

有什么想法吗？我想我要么需要堆叠 svg:circles 以便叶节点位于其他节点之前，要么仅将 svg:titles 附加到叶节点，但我不确定该怎么做。

这是工具提示的 fiddle : Fiddle

Answer 1

问题其实不在于代码，而在于CSS阻止了叶节点圆圈接收指针事件。简单地删除

circle.child {
  pointer-events: none;
}

而且效果很好。完整示例 here .