-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Comments
底层渲染引擎的 SVG 的 path 存在问题,建议用 canvas 代替。可以使用类 jsx 或者 react 标签来定义 canvas 节点 https://g6.antv.vision/zh/docs/manual/middle/elements/nodes/react-node/#gatsby-focus-wrapper |
非常抱歉,当前版本(3.x、4.x)依赖的底层渲染引擎暂时不会考虑 SVG 问题的修复,渲染引擎目前正在大升级,我们也将在新版本接入新渲染引擎,届时应当可以解决 SVG 各种 bug |
求求了,这种问题加到文档吧,我文档都扒拉烂了,不是看见这个issue,我这辈子都不知道为什么 |
2024年7月份了,这个bug修复了吗 |
求求修复一下吧 |
这个填充问题还有机会修复吗 |
我是直接用css样式覆盖掉填充颜色,有效果 |
救命啊! renderer: 'svg' 这问题没人管了是吗? |
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';
/**
*/
/**
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;">
},
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')
![image](https://user-images.githubusercontent.com/23349869/146878790-b18c4560-0532-4a22-aea9-00272afe4e98.png)
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight - 100);
};
`
Screenshots or Videos
No response
Platform
Additional context
No response
The text was updated successfully, but these errors were encountered: