0

嗨，我正在使用 Infovis(JIT) 强制有向图，我有 100 多个节点连接到单个父节点，这会创建一个圆形，但节点的名称是重叠的，很难读取它们的名称。有什么方法可以自定义它以使其发生。任何帮助将不胜感激。仅供参考，我尝试overritable: false输入 Label 变量，但它不起作用

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

一些节点是这样来的：在此处输入图像描述

或者请提出任何随机增加减小边缘大小的方法。

4

1 回答 1

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);
            }                       
        }; 
    }
于 2015-06-25T05:59:37.650 回答