8

私はここで頭を叩いています。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 を添付する必要があると思いますが、その方法がわかりません。

ツールチップのフィドルは次のとおりです。 フィドル

4

1 に答える 1

9

実際、問題はコードではなく、リーフ ノード サークルがポインター イベントを受信できないようにする CSS にあります。単純に削除

circle.child {
  pointer-events: none;
}

そしてそれはうまくいきます。ここに完全な例があります。

于 2013-11-14T18:15:52.537 に答える