Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

自定义dom节点后采用renderer: 'svg'渲染,边箭头一些属性失效,比如fill箭头填充色,箭头指向,箭头线宽等 #3385

Closed
gongpingwa00 opened this issue Dec 21, 2021 · 8 comments

Comments

@gongpingwa00
Copy link

gongpingwa00 commented Dec 21, 2021

Describe the bug

自定义dom节点后采用renderer: 'svg'渲染,边箭头一些属性失效,比如fill箭头填充色,箭头指向,箭头线宽,边lineAppendWidth属性等,
因为自己项目中需求场景需要自定义dom节点,然后边是带箭头的.
首先采用内置箭头triangle,发现fill填充属性不起作用,箭头也是反方向的(其他带有填充属性的内置箭头都不行),
边响应鼠标事件时的检测宽度lineAppendWidth也无效
然后去自定义边,绘制箭头,发现fill也不起作用,线宽等都不起作用,只有path,d两个属性起作用

目前看情况主要是renderer: 'svg'影响到了箭头的填充属性,但是要自定义dom节点必须要用renderer: 'svg'

Your Example Website or App

官方图表示例自定义节点->自定义dom节点 (在线编辑代码)

Steps to Reproduce the Bug or Issue

1.在自己的项目中采用自定义dom节点,给边一个初始化属性加上箭头,发现箭头填充色不起作用
2.采用官方例子,在线编辑自定义dom节点例子,将边加上箭头属性,箭头的fill属性不生效
3.目前分析是renderer: 'svg'在影响箭头的填充属性fill

Expected behavior

在官方图表示例->元素->自定义节点->dom节点例子在线编辑,给边加上默认箭头

`import G6 from '@antv/g6';
import { useEffect } from 'react';

/**

  • This demo shows how to register a custom node with SVG DOM shape
  • by Shiwu

*/

/**

  • Register a node type with DOM
    */
    G6.registerNode('dom-node', {
    draw: (cfg, group) => {
    const stroke = cfg.style ? cfg.style.stroke || '#5B8FF9' : '#5B8FF9';
    const shape = group.addShape('dom', {
    attrs: {
    width: cfg.size[0],
    height: cfg.size[1],
    html: `
    <div id=${
    cfg.id
    } class='dom-node' style="background-color: #fff; border: 2px solid ${stroke}; border-radius: 5px; width: ${
    cfg.size[0] - 5
    }px; height: ${cfg.size[1] - 5}px; display: flex;">

       <span style="margin:auto; padding:auto; color: #5B8FF9">1</span>
     </div>
       `,
    

    },
    draggable: true,
    });
    return shape;
    },
    });

/** 数据 */
const data = {
nodes: [
{
id: 'node1',
x: 10,
y: 100,
label: 'Homepage',
},
{
id: 'node2',
x: 200,
y: 100,
label: 'Subpage',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 100;

const descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML = 由于打包问题,本 demo 的 111-113 行被暂时注释。需要您在代码栏中打开 111-113 行的注释以得到自定义 DOM 节点正确的交互。<br /> Due to the packing problem of the site, we have to note the line 111-113 of this demo temporary. Unnote them to see the result of custom DOM node with interactions please.;
container.appendChild(descriptionDiv);
const graph = new G6.Graph({
container: 'container',
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
renderer: 'svg',
linkCenter: true,
defaultNode: {
type: 'dom-node',
size: [20, 40],
},
defaultEdge:{ //主要加的这一个属性
style:{
stroke: '#91d5ff',
lineAppendWidth:30,
endArrow: {
path: G6.Arrow.triangle(10, 20, 25),
d: 25,
fill:'#ff0000'
},
}

}
});

graph.data(data);
graph.render();

// click listener for dom nodes to response the click by changing stroke color
const listener = (dom) => {
const nodeId = dom.id;
if (!nodeId) return;
const node = graph.findById(nodeId);
let stroke = '';
if (!node.hasState('selected')) {
stroke = '#f00';
graph.setItemState(node, 'selected', true);
} else {
stroke = '#5B8FF9';
graph.setItemState(node, 'selected', false);
}
graph.updateItem(nodeId, {
style: {
stroke,
},
});
};

const bindClickListener = () => {
const domNodes = document.getElementsByClassName('dom-node');
for (let i = 0; i < domNodes.length; i++) {
const dom = domNodes[i];
// open the following lines pls!
// dom.addEventListener('click', (e) => {
// listener(dom);
// });
}
};

bindClickListener();

// after update the item, all the DOMs will be re-rendered
// so the listeners should be rebinded to the new DOMs
graph.on('afterupdateitem', (e) => {
bindClickListener();
});
graph.on('afterrender', (e) => {
bindClickListener();
});
// if it is TreeGraph and with default animate:true, you should bind the litsener after animation
// graph.on('afteranimate', (e) => {
// bindClickListener();
// });

if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight - 100);
};
`
image

Screenshots or Videos

No response

Platform

  • Browser: [Chrome]
  • Version: [版本 95.0.4638.54(正式版本) (64 位)]
  • antv G6版本:[4.3.2]

Additional context

No response

@Yanyan-Wang
Copy link
Contributor

底层渲染引擎的 SVG 的 path 存在问题,建议用 canvas 代替。可以使用类 jsx 或者 react 标签来定义 canvas 节点

https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/react-node/#gatsby-focus-wrapper
https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/jsx-node

@Yanyan-Wang
Copy link
Contributor

非常抱歉,当前版本(3.x、4.x)依赖的底层渲染引擎暂时不会考虑 SVG 问题的修复,渲染引擎目前正在大升级,我们也将在新版本接入新渲染引擎,届时应当可以解决 SVG 各种 bug

@yuguaa
Copy link

yuguaa commented Dec 6, 2023

非常抱歉,当前版本(3.x、4.x)依赖的底层渲染引擎暂时不会考虑 SVG 问题的修复,渲染引擎目前正在大升级,我们也将在新版本接入新渲染引擎,届时应当可以解决 SVG 各种 bug

求求了,这种问题加到文档吧,我文档都扒拉烂了,不是看见这个issue,我这辈子都不知道为什么

@1055041142
Copy link

2024年7月份了,这个bug修复了吗

@Ezra-Chan
Copy link

求求修复一下吧

@wjr1116
Copy link

wjr1116 commented Sep 11, 2024

这个填充问题还有机会修复吗

@Ezra-Chan
Copy link

这个填充问题还有机会修复吗

我是直接用css样式覆盖掉填充颜色,有效果
defs > marker > path { fill: #1ffcdb; }

@bucengfangqi
Copy link

救命啊! renderer: 'svg' 这问题没人管了是吗?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants