Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

ComboCombinedLayout 子节点未生成位置信息

Abierto
  • ¿Algo no está bien?
#290 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
data-visualization

Línea de trabajo

Comienza en ComboCombinedLayout y reproduce el problema con los datos de nodes y edges proporcionados; después, inspecciona los resultados de layout.forEachNode. Compara la configuración de grid/force con la configuración de dagre y verifica si los layouts secundarios reciben valores x/y; se considera terminado cuando los nodos secundarios tienen posiciones junto a sus layouts Combo principales.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

问题描述

在使用 ComboCombinedLayout 进行布局时，发现子节点（child）没有生成位置信息，仅有 Combo（父节点）有正常的布局坐标。参考文档示例：

const layout = new ComboCombinedLayout({
    layout: (comboId) => (comboId ? { type: 'grid' } : { type: 'force' }),
    width: graphArea.width,
    height: graphArea.height,
    nodeSize: (nodeData) => {
      if (nodeData.children && nodeData.children.length > 0) {
        const size: number[] = [0, 0]
        ;(nodeData.children as Cell[]).forEach((cell) => {
          const bbox = cell.getBBox().inflate(20, 80)
          const corner = bbox.getCorner()
          size[0] = Math.max(corner.x - bbox.x, size[0])
          size[1] += corner.y - bbox.y
        })
        return [size[0], size[1] + 80]
      } else {
        return [nodeData.width, nodeData.height]
      }
    },
    nodeSpacing: 10,
    comboSpacing: 50,
    comboPadding: 80,
  })

  const data: GraphData = {
    nodes: graphInstance.value.getNodes().map((node) => {
      const bbox = node.getBBox().inflate(20, 80)
      const corner = bbox.getCorner()
      return {
        id: node.id,
        width: corner.x - bbox.x,
        height: corner.y - bbox.y,
        parentId: node.parent ? node.parent.id : undefined,
        isCombo: node.getChildCount() > 0,
        children: node.getChildren(),
      }
    }),
    edges: graphInstance.value
      .getEdges()
      .map((edge) => {
        const source = (edge.getSource() as any)?.cell?.id ?? (edge.getSource() as any)?.cell
        const target = (edge.getTarget() as any)?.cell?.id ?? (edge.getTarget() as any)?.cell

        if (source && target) {
          return {
            id: edge.id,
            source: source,
            target: target,
          }
        } else {
          return undefined
        }
      })
      .filter((edge) => !!edge),
  }

复现步骤

  1. 使用上述代码初始化 ComboCombinedLayout，并传入正确的 nodes/edges 数据。
  2. 打印所有节点（layout.forEachNode）的布局结果。
  3. 发现 Combo 节点有 x/y/size 信息，child 节点仅有 parentId，无 x/y。

结果 1（Combo 使用网格+力导布局）：

----- Layout -----
[Combo有正常坐标]
Layout {_original: {…}, id: 'plan-1', x: 1930.5203, y: 836.8409, size: Array(3)}
Layout {_original: {…}, id: 'plan-2', x: 486.1697598345537, y: 1718.9923985392923, size: Array(3)}
Layout {_original: {…}, id: 'plan-3', x: 1045.2470105340658, y: -687.329323623052, size: Array(3)}
...
[child无坐标]
Layout {_original: {…}, id: 'work-0', parentId: 'plan-1'}
...

结果 2（Combo 使用 dagre）：

----- Layout -----
[Combo坐标一样]
Layout {_original: {…}, id: 'plan-1', x: 575, y: 407.5, size: Array(3)}
Layout {_original: {…}, id: 'plan-2', x: 575, y: 407.5, size: Array(3)}
Layout {_original: {…}, id: 'plan-3', x: 575, y: 407.5, size: Array(3)}
...
[child无坐标]
Layout {_original: {…}, id: 'work-0', parentId: 'plan-1'}
...

期望行为

child 节点应像 Combo 节点一样拥有 x、y 位置信息。参考官方文档、示例和多布局配置，正常情况下所有节点应该都能生成位置信息。

补充信息

  • 当前 antvis/layout 版本：请补充
  • 浏览器环境：请补充
  • 是否改造过 ComboCombinedLayout 等核心逻辑：否
  • 若有进一步复现 demo 可协助追踪定位。

如需提供更多信息可联系。

Lenguaje dominante
TypeScript
Estrellas
280
Forks
61
Sin PR fusionados en 30 d

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de antvis/layout

Todos los issues de antvis/layout

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.