Question

您好我正在使用Infovis（JIT）强制有向图，并且我有超过100个节点连接到单个父节点，这创建了一个圆形形状，但节点的名称是重叠的，并且很难读取它们的名称。有没有办法定制它，以便它应该发生。任何帮助将受到高度赞赏。 FYI 我已经尝试将overritable: false放在Label变量中，但它无法正常工作

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

有些节点是这样的： enter image description here

或者请建议任何方式随机增加减小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);
            }                       
        }; 
    }

Infovis强制定向节点名称重叠

1 个答案: