antvis/G6

对node节点设置label标签不生效 #5370

yym4531416 posted onGitHub

问题描述

项目很旧,G6版本也很旧,但是这个应该是基础功能,贴代码:

 createG6PluginObjFun: function (data) {
                // 第二步:注册图形
                G6.registNode('rect', {
                    // 设置锚点
                    getAnchorPoints: function () {
                        return [
                            [1, 0.5], // 右边边的中点
                            [0, 0.5] // 左边边的中点
                        ];
                    }
                });
                // 第三步:进行布局
                var Layout = G6.Layout;
                var margin = 10;
                var height = 600 - margin;
                var width = 200 - margin;
                var nodes = data.nodes;
                var edges = data.edges;
                var layout = new Layout.Flow({
                    nodes: nodes,
                    edges: edges
                });
                nodes = layout.getNodes();
                nodes.map(function (node) {
                    var x = node.x * width + margin;
                    var y = node.y * height + margin;
                    node.x = y;
                    node.y = x;
                });
                // 第四步:初始化图
                var net = new G6.Net({
                    id: "dataMap",            // 此处替换容器id
                    height: 300,         // 此处替换高度
                    fitView: 'autoZoom', // 自动缩放
                });
                // 第五步:载入数据
                net.source(nodes, edges);
                // 第六步:数据映射
                net.node()
                    .style(function (obj) {
                        var attrs = {};
                        attrs.fillOpacity = 0.9;
                        return attrs;
                    })
                    .label(function (obj) {
                        console.log('kuaichulai')
                        return {
                            text: obj.name,
                            fill: 'black',
                            fontSize: 12
                        };
                    }).tooltip("name");
                net.tooltip(true);
                net.edge()
                    .size(2)
                    .shape('smooth')
                    .style({
                        stroke: "black",
                        strokeOpacity: 0.6,
                        arrow: true
                    });
                // 第八步:渲染关系图
                net.render();
            }

node下的.label(function (obj) { console.log('kuaichulai') return { text: obj.name, fill: 'black', fontSize: 12 }; 控制台没有任何反应,将这段代码放到net.edge()后面能正常执行并生成label

重现链接

no

重现步骤

不涉及

预期行为

能够正常的在node上生成label

平台

  • 操作系统: [ Windows]
  • 网页浏览器: [Google Chrome, Safari, Firefox]
  • G6 版本: [1.1.6]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response


搞了好几个小时无果,希望能解决

posted by yym4531416 about 1 year ago

请问有G6的钉钉交流群么?

posted by yym4531416 about 1 year ago
posted by yym4531416 about 1 year ago

能有直接可以运行的在线 DMEO 吗,方便调试一下。

posted by hustcc about 1 year ago

能有直接可以运行的在线 DMEO 吗,方便调试一下。

我下午做下demo,到时候联系您

posted by yym4531416 about 1 year ago

能有直接可以运行的在线 DMEO 吗,方便调试一下。

https://codesandbox.io/p/sandbox/modest-ace-gqzg74?file=%2Frun.js%3A52%2C10

非常抱歉,能力有限,demo未能运行,我只能将核心代码都放里面,一个是index文件,内容是1.1.6的g6依赖,还有一个run文件是我的js逻辑,如果您能帮忙解决,将十分感谢。

posted by yym4531416 about 1 year ago

这个版本有点太老了,我也不知道这里面的逻辑,只能尝试看看能不能解决。如果你那是长期迭代的项目,建议还是早点升级。

另外,你给的这个也跑不起来啊~

posted by hustcc about 1 year ago

这个版本有点太老了,我也不知道这里面的逻辑,只能尝试看看能不能解决。如果你那是长期迭代的项目,建议还是早点升级。

另外,你给的这个也跑不起来啊~

是的,没能跑起来,前端理解不深,这是很老的项目,这也是最后一个需求。我也试过升级到3.1.1,没成功,实在不行只能先这样了。

posted by yym4531416 about 1 year ago

这个问题还是需要解决,node里的label样式无法进行设置,原因还没找到。

posted by yym4531416 about 1 year ago

的在线 DMEO 吗,方便调

https://jsbin.com/woqiqerehu/1/edit

hello,demo已经做好了

net.node() .size(function (obj) { return [200, 50, 200, 50]; }) .style(function (obj) { var attrs = {}; attrs.fillOpacity = 0.9; return attrs; }) .label(function (obj) { console.log('11111') return { text: '1111', fill: 'black', fontSize: 12 }; });

node设置label不生效,还请帮忙看下~

posted by yym4531416 about 1 year ago

看了下不知道原因,这个版本太老了,源代码在分支中都没有,文档也没有找到哪里有。

建议你直接改数据中的 label 属性吧。

posted by hustcc about 1 year ago

看了下不知道原因,这个版本太老了,源代码在分支中都没有,文档也没有找到哪里有。

建议你直接改数据中的 label 属性吧。

好的,找了其他方式来规避了,谢谢了~

posted by yym4531416 about 1 year ago

好的,找了其他方式来规避了,谢谢了~

你的方法是什么?也回复到这里吧,如果别人遇到也能看到。

posted by hustcc about 1 year ago

好的,找了其他方式来规避了,谢谢了~

你的方法是什么?也回复到这里吧,如果别人遇到也能看到。

也不是什么高明的方法,label的字体,对齐方式等都是用的默认,label里的换行、超长文本处理都是后台接口处理好,又增加了tiptool来展示超长文本隐藏的部分。

posted by yym4531416 about 1 year ago

Fund this Issue

$0.00
Funded

Pull requests