relation-graph-vue3-2.2.10 节点和文字不显示，

[qifengzhang007]

问题描述

1.我复制官网实力代码（vue3部分）： https://relation-graph.com/#/demo/vue3?id=node-style2
2.在我本机渲染以后不显示节点和相关的文字，只显示了连线。
3.本地packagejson中引用的包名和版本： "relation-graph-vue3": "^2.2.10" , vue:3.4.35 , 目前已经是最新版本，不知道发生了什么情况.

目前的效果图：

我本地的代码

<template>
  <div id="demo-graph">
    <div id="graph-container">
      <RelationGraph ref="graphRef" :options="options" :on-node-click="fonNodeClick">
        <template #node="{node}">
          <div style="padding-top:20px;">节点：{{ node.text }}</div>
        </template>
      </RelationGraph>
    </div>
  </div>
</template>

<script>
import {reactive, ref, watch, toRefs, onBeforeMount, onMounted} from "vue";
import RelationGraph from 'relation-graph-vue3'


export default {
  name: "DemoGraph001",
  components: {
    RelationGraph
  },
  props: {
  },
  setup(props, context) {

    const stateData = reactive({
          // 关系图组件相关的配置
          graphRef: {},
          options: {
            allowSwitchLineShape: true,
            allowSwitchJunctionPoint: true,
            defaultLineColor: 'rgba(255, 255, 255, 0.6)',
            defaultNodeColor: 'transparent',
            defaultNodeBorderWidth: 0,
            defaultNodeBorderColor: 'transparent',
            defaultNodeFontColor: '#ffffff',
            defaultNodeShape: 1,
            toolBarDirection: 'h',
            toolBarPositionH: 'right',
            toolBarPositionV: 'bottom',
            defaultLineShape: 6,
            defaultJunctionPoint: 'lr',
            backgroundColor: 'rgb(101, 163, 13)',
            layout: {
              layoutName: 'tree',
              from: 'left',
              'min_per_width': 310,
              'min_per_height': 70,
            }
          },
          jsonData: {
            rootId: 'a',
            nodes: [
              {id: 'a', text: 'a'},
              {id: 'b', text: 'b'},
              {id: 'b1', text: 'b1'},
              {id: 'b1-1', text: 'b1-1'},
              {id: 'b1-2', text: 'b1-2'},
              {id: 'b1-3', text: 'b1-3'},
              {id: 'b1-4', text: 'b1-4'},
              {id: 'b1-5', text: 'b1-5'},
              {id: 'b1-6', text: 'b1-6'},
              {id: 'b2', text: 'b2'},
              {id: 'b2-1', text: 'b2-1'},
              {id: 'b2-2', text: 'b2-2'},
              {id: 'c', text: 'c'},
              {id: 'c1', text: 'c1'},
              {id: 'c2', text: 'c2'},
              {id: 'c3', text: 'c3'}
            ],
            lines: [
              {from: 'a', to: 'b', text: ''},
              {from: 'b', to: 'b1', text: ''},
              {from: 'b1', to: 'b1-1', text: ''},
              {from: 'b1', to: 'b1-2', text: ''},
              {from: 'b1', to: 'b1-3', text: ''},
              {from: 'b1', to: 'b1-4', text: ''},
              {from: 'b1', to: 'b1-5', text: ''},
              {from: 'b1', to: 'b1-6', text: ''},
              {from: 'b', to: 'b2', text: ''},
              {from: 'b2', to: 'b2-1', text: ''},
              {from: 'b2', to: 'b2-2', text: ''},
              {from: 'a', to: 'c', text: ''},
              {from: 'c', to: 'c1', text: ''},
              {from: 'c', to: 'c2', text: ''},
              {from: 'c', to: 'c3', text: ''}
            ]
          }
        }
    )

    const fonNodeClick = (node, e) => {
      console.log('onNodeClick:', node.id);
      return true;
    }

    const fShowGraph = async () => {
      const graphInstance = stateData.graphRef.getInstance();
      console.log('graphInstance:', graphInstance);
      if (graphInstance) {
        await graphInstance.setJsonData(stateData.jsonData);
        await graphInstance.moveToCenter();
        await graphInstance.zoomToFit();
      }
    }

    onMounted(() => {
          fShowGraph()
        }
    )

    return {
      ...toRefs(stateData),
      fonNodeClick
    }
  }
}
</script>

<style scoped>
#demo-graph {
  padding: 4px 10px;
  min-height: 700px;
}

#graph-container {
  border: #0d3d65 solid 1px;
  height: calc(100vh - 100px);
  width: 100%;
}

</style>

[qifengzhang007]

问题解决了，有个元素div设置了样式 overflow-x: hidden ， 导致节点不显示，
真是奇特问题。