簡體   English   中英

D3圓包布局中嵌套圓的工具提示

[英]Tooltips for nested circles in D3 circle pack layout

我在這里敲我的頭。 我想在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附加到葉節點,但我不知道如何做到這一點。

這是工具提示的小提琴小提琴

問題實際上不是代碼,而是阻止葉節點圈接收指針事件的CSS。 只需刪除

circle.child {
  pointer-events: none;
}

它工作正常。 在這里完成示例。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM