antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

G6 v4.x renderer='svg' exported svg contains hided nodes and edges #6505

balrogden posted onGitHub

Describe the bug / 问题描述

use graph with my cusomt nodes. Some nodes amd edges are hided by graph.hideItem. When i call toFullDataURL all hided nodes and edges are visible on result svg

No response

Steps to Reproduce the Bug or Issue / 重现步骤

create graph with renderer='svg' used layout = dagre add some nodes and edge call graph.layout hide some nodes using graph.hideItem call graph.toFullDataURL( svgUrl => {do something with svg}) extent of svgUrl will be correct - only for visible nodes, but all invisible nodes wich lies inside extent will be visible in the svgUrl

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome, Firefox

Additional context / 补充说明

No response


Reproduction code - after mounted call hideNodes, - there is only 4 nodes visible . After call exportSvg - in downloaded svg will be visible all 6 nodes

`const data = { nodes: [ { id: '1', }, { id: '2', }, { id: '3', }, { id: '4', }, { id: '5', }, { id: '6', }, ], edges: [ { source: '1', target: '2', }, { source: '1', target: '3', }, { source: '1', target: '4', }, { source: '1', target: '5', }, { source: '2', target: '6', }, { source: '3', target: '6', }, { source: '4', target: '6', }, { source: '5', target: '6', }, ], };

const graph = new G6.Graph({ container: 'mountDiv', // String | HTMLElement, required, the id of DOM element or an HTML node width: 800, // Number, required, the width of the graph height: 500, // Number, required, the height of the graph renderer:'svg', modes: { default: [ { type: 'drag-canvas', allowDragOnItem: true, enableOptimize: false, }, { type: 'zoom-canvas', enableOptimize: false, }, ] }, layout: { type: 'dagre', rankdir: 'LR', nodeSize: [120-20, 100-20], nodesep: 25, ranksep: 50, sortByCombo: true },

});

graph.data(data); // Load the data defined in Step 2 graph.render(); // Render the graph

function hideNodes() { graph.hideItem(graph.findById('3')) graph.hideItem(graph.findById('4')) } function exportSvg() { graph.toFullDataURL(svgUrl => { const link = document.createElement('a') link.href = svgUrl link.download = 'testfile' document.body.appendChild(link); link.click(); document.body.removeChild(link); }, 'image/svg', { backgroundColor: '#ffffff', padding: [10, 10, 10, 10] }) } `

posted by balrogden 6 months ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests