ノードがキャンバスに部分的に表示されている場合、一番左のノードのラベルは消えます。これを解決するにはどうすればよいですか?
ありがとう
それほど洗練されていないかもしれませんが、これを修正するもっと簡単な方法があります。
まず、Spacetree に関連付けられた div で CSS 3 オーバーフロー属性を使用します。たとえば、infovis で使用されている HTML ページの div が
<div id="infovis"> </div>
次に、キャンバスがオーバーフローしないようにする CSS が必要です。
#infovis {
position:relative;
width:inherit;
height:inherit;
margin:auto;
overflow:hidden;
}
次に、空間ツリーの定義で、おそらく placeLabel : 関数が定義されています。最後に、style.display = ""; を設定するだけです。これにより、ノードがキャンバスに配置された場合にラベルが強制的に表示されます。例えば:
onPlaceLabel: function(label, node, controllers){
//override label styles
var style = label.style;
if (node.selected) {
style.color = '#ccc';
}
else {
style.color = '#fff';
}
// show the label and let the canvas clip it
style.display = '';
}
したがって、テキストを表示し、それをブラウザーに渡して、キャンバスからはみ出したノードまたはラベルの任意の部分をクリップします。
InfoVis は、ラベルがノードに表示される場合、ラベルがキャンバスから外れると主張する場合、ノード ラベルを非表示にしようとします。
基本的に、キャンバスの位置と寸法、ノードの位置と寸法を計算し、ラベルの位置がキャンバスの外にあるかどうかを確認しようとします。
これは、最終的なjit.jsファイルの 9683 行目と 7669 行目あたりの関数でplaceLabel
確認できます。fitsInCanvas
SpaceTreeビジュアライゼーションを使用しているときに、この問題にも直面しました。これは、モバイルでまともなエクスペリエンスを提供しようとしたときに問題になりました。そこでは、キャンバスのパンを機能させる方法が見つかりませんでした (そのため、ノード ラベルが部分的に消えたときに、そのノードを選択して全体を中央に配置する方法がありませんでした)。結果として、他のノードのさらなる探索を可能にするためのツリー...)。
私がしたことは、機能を変更することでしたfitsInCanvas
:
fitsInCanvas: function(pos, canvas, nodeW, nodeH) {
var size = canvas.getSize();
if(pos.x >= size.width || (pos.x + nodeW) < 0
|| pos.y >= size.height || pos.y + nodeH < 0) return false;
return true;
}
そして、それに応じてそれを呼び出しましたplaceLabel
:
placeLabel: function(tag, node, controller) {
...
...
...
var style = tag.style;
style.left = labelPos.x + 'px';
style.top = labelPos.y + 'px';
// Now passing on the node's width and heigh
style.display = this.fitsInCanvas(labelPos, canvas, w, h)? '' : 'none';
controller.onPlaceLabel(tag, node);
}
ただし、これは解決策ではありません。ノード全体が消えるまで、奇妙な効果でラベルがキャンバスから落ちるのがおそらく見られるでしょう。そして、明らかに、ソースを直接変更しました...チケットはgithubに入力する必要があります。
編集:
実際、古いバージョンの lib で作業していたようです。議論された行動は、私が説明していたものと似たものに変わりました。したがって、コードを変更する必要はありません。ファイルを再度ダウンロードするだけです。具体的には、次のリンクでこれらの変更が得られるはずです。