Infovis強制定向節點名稱重疊

Question

嗨，我正在使用Infovis（JIT）強制有向圖，並且我有100多個節點連接到單個父節點，這創建了一個圓形形狀，但是節點的名稱重疊並且很難讀取其名稱。 有什么方法可以自定義它，以便它應該發生。 任何幫助將不勝感激。 僅供參考，我嘗試在標簽變量中放置可overritable: false ，但是它不起作用

Label: {
      type: labelType, //Native or HTML
      size: 10,
      style: 'normal'
    },

一些節點是這樣的：

否則，建議使用任何方法隨機增加Edge的大小。

Answer 1

自從我使用這個庫以來已經有很長時間了，但是我遇到了類似的問題。 您可以做的一件事就是這個。 操縱邊緣的長度，以使相鄰的邊緣具有不同的長度，即，一條邊緣比其相鄰的邊緣長。 這樣可以避免標簽重疊。 您可能可以覆蓋邊緣和節點的渲染，如以下代碼所示。

自定義邊緣類型的功能不執行上述操作，但可以幫助您確定如何覆蓋渲染。 您可以遍歷邊緣並在邊緣上設置標志，以指示要渲染的長度。 例如： customLength:'short'/'long'然后，您可以在渲染器函數getFDEdgeType訪問此標志，並相應地更改長度。 希望能幫助到你。

,initFD: function() {
        // other stuff..... like lableType etc.

        // define your own edge type
        $jit.ForceDirected.Plot.EdgeTypes.implement({
            'label-arrow-line': this.getFDEdgeType()
        });
}


,getFDEdgeType: function() {
        return {
            'render':function(adj, canvas) {
                // get nodes cartesian coordinates
                var pos = adj.nodeFrom.pos.getc(true);
                var posChild = adj.nodeTo.pos.getc(true);
                // plot arrow edge
                this.edgeHelper.line.render( { x: pos.x, y: pos.y }, { x: posChild.x, y: posChild.y }, canvas );    
                // check for edge label in data
                if( adj.getData('labelid') && adj.getData('labeltext') ) {
                    // now adjust the label placement
                    var radius = this.viz.canvas.getSize(); 
                    var x = parseInt((pos.x + posChild.x - ( adj.getData('labeltext').length * 1)) / 2); 
                    var y = parseInt((pos.y + posChild.y ) /2);
                    if( adj.getData('showLabel') == 'true' ) 
                        this.viz.canvas.getCtx().fillText(adj.getData('labeltext'), x, y); 
                    else this.viz.canvas.getCtx().fillText('', x, y); // do not show label is showLabel is false
                }
            },
            'contains': function(adj,pos){ 
                var posFrom = adj.nodeFrom.pos.getc(true);
                var posTo = adj.nodeTo.pos.getc(true);
                return this.edgeHelper.line.contains({ x: posFrom.x, y: posFrom.y }, { x: posTo.x, y: posTo.y }, { x: pos.x, y: pos.y }, adj.Config.dim);
            }                       
        }; 
    }