为什么标签在 cytoscape 中被切断？

问题描述 投票：0回答：2

在 cytoscape.js 中，我想在父节点的左上角放置一个标签，文本从锚点开始（即与看起来横跨父节点顶部的文本左对齐）。

我已经为 text-halign、text-valign 和 text-justification 设置了值：

'text-halign': 'left',
'text-justification': 'left',
'text-valign': 'top',

但是，文本并不总是出现。在这个 jsfiddle 标签最初没有出现 - 你只得到一部分'p'：

Parent node with label cut off

但是，如果您放大父节点的左上角（使用鼠标滚轮），标签最终会出现在正确的位置：

parent label after zooming in

我还注意到，如果我为父节点设置文本背景属性，它们会右对齐绘制，而不是在实际标签下：

label background offset

我也看到了与子节点相同的问题（尽管此示例中未显示）。

我尝试了

text-
属性的各种组合。虽然标签在放大时完全显示，但在较低的缩放级别时总是被切断。

有没有一种方法可以让文本出现在父节点的左上角并完整显示而无需放大？

javascript label cytoscape.js
2个回答
0
投票

我是这个图书馆的新手，所以如果这没有解决您的问题，请原谅。 在进行一些更改并查看文档后，我发现

'text-wrap':'wrap'
在样式中添加此属性将解决您的问题。

请看代码片段

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,

  style: [
    {
      selector: 'node',
      style: {
        'background-color': 'gray',
        label: 'data(id)',
        'text-margin-y': 1,
        width: 50,
        height: 50
      }
    },
    {
      selector: 'node:parent',
      style: {
        'border-opacity': 0,
        'background-color': 'lightgray',
        'text-halign': 'left',
        'text-valign': 'top',
        'text-margin-x': 45,
        'text-justification': 'left',
        'text-wrap':'wrap'
      }
    }
    ],

  elements: {
    nodes: [
      { data: { id: 'parent' } },
      { data: { id: 'child1', parent: 'parent' }, position: { x: 300, y: 85 }},
      { data: { id: 'child2', parent: 'parent' }, position: { x: 400, y: 85 }},
      { data: { id: 'node' }, position: { x: 500, y: 85 }},
    ],
    edges: []
  },

  layout: {
    name: 'preset',
    padding: 5
  }
});
#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
<body>
<div id="cy"></div>
</body>

0
投票

使用特定的私有字段，您可以轻松获取节点标签宽度。我总是更喜欢使用普通的 API 方法，因为它通常并不真正打算使用这些字段。由于目前无法获取此数据，这将为您提供宽度：

'text-margin-x': (ele) => ele._private.rscratch.labelWidth

这可能会导致一些错误，所以我添加了一个labelWidth为null的情况：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,

  style: [{
      selector: 'node',
      style: {
        'background-color': 'gray',
        label: 'data(id)',
        width: 50,
        height: 50
      }
    },
    {
      selector: 'node:parent',
      style: {
        'border-opacity': 0,
        'background-color': 'lightgray',
        'text-halign': 'left',
        'text-valign': 'top',
        'text-margin-x': (ele) => ele._private.rscratch.labelWidth ? ele._private.rscratch.labelWidth : 0
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: 'parent'
        }
      },
      {
        data: {
          id: 'child1',
          parent: 'parent'
        },
        position: {
          x: 300,
          y: 85
        }
      },
      {
        data: {
          id: 'child2',
          parent: 'parent'
        },
        position: {
          x: 400,
          y: 85
        }
      },
      {
        data: {
          id: 'node'
        },
        position: {
          x: 500,
          y: 85
        }
      },
    ],
    edges: []
  },

  layout: {
    name: 'preset',
    padding: 5
  }
});
#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>

<body>
  <div id="cy"></div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.