Question

我在React环境中使用JointJS从某些Neo4j数据创建有向图。我的问题是，纸As pictured here, "test6" is generated mostly off the page and "test10" isn't even shown上正在生成元素。我希望所有元素都显示在纸上，彼此之间尽可能不重叠或尽可能不重叠。

我的纸张仅使用宽度尺寸设置为等于div宽度，并且div的样式设置为100％宽度

...
width: $('#paper').width(),
...

和

render(){
        return(
            <React.Fragment>
                <div id="paper" style={{width:'100%'}}></div>
            </React.Fragment>
        )
    }

用于生成元素的代码如下：

function makeElement(node) {
    var maxLineLength = _.max(node.name.split('\n'), function(l) { return l.length; }).length;

    var letterSize = 12;
    var width = 2 * (letterSize * (0.6 * maxLineLength + 1));
    var height = 2 * ((node.name.split('\n').length + 1) * letterSize);

    return new joint.shapes.basic.Rect({
        id: node.id,
        size: { width: 100, height: height },
        attrs: {
            type:'node',
            text: { 
              text: node.name, 
              'font-size': letterSize, 
              'font-family': 'monospace' },
            rect: {
                width: width, height: height,
                rx: 5, ry: 5,
                stroke: '#555'
            }
        }
    });
}

预先感谢：）

编辑：我还没有确切的解决方案，但是与此同时，我使用this使纸张可拖动以查看所有节点

防止JointJS元素生成纸张

0 个答案: