I have based my code on this graph and I'm having problems with zooming in.
Before zooming in it looks like
but after zoom in things get messed up
My modified code looks like this
const simulation = d3.forceSimulation(nodes)
.force('link', forceLink)
.force('charge', forceNode)
.force('center', d3.forceCenter())
.on('tick', ticked);
const svg = d3.select('figure#' + this.graphId)
.append('svg')
.attr('viewBox', [-width / 2, -height / 2, width, height])
.attr('style', 'max-width: 100%; height: auto; height: intrinsic;');
const link = svg.append('g')
.attr('stroke', typeof linkStroke !== 'function' ? linkStroke : null)
.attr('stroke-opacity', typeof linkStrokeOpacity !== 'function' ? linkStrokeOpacity : null)
.attr('stroke-width', typeof linkStrokeWidth !== 'function' ? linkStrokeWidth : null)
.attr('stroke-linecap', linkStrokeLinecap)
.selectAll('line')
.data(links)
.join('line');
const node = svg.append('g')
.attr('fill', nodeFill)
.attr('stroke', nodeStroke)
.attr('stroke-opacity', nodeStrokeOpacity)
.attr('stroke-width', nodeStrokeWidth)
.selectAll('g')
.data(nodes)
.join('g')
.call(drag(simulation));
const tooltip = svg.append('text')
.attr('visibility', 'hidden')
.attr('opacity', 0)
.attr('stroke', 'white')
.attr('stroke-width', 0.2)
.attr('fill', 'black')
.attr('font-size', 22)
;
const circle = node.append('circle')
.attr('r', typeof nodeRadius !== 'function' ? nodeRadius : null)
;
//
// Zoom related stuff
//
function zoomed(e: any): void {
node.attr('transform', e.transform);
link.attr('transform', e.transform);
circle.attr('transform', e.transform);
tooltip.attr('transform', e.transform);
}
const zoomHandler = d3.zoom()
.on('zoom', zoomed)
.scaleExtent([1, 5])
;
svg.call(zoomHandler);
What am I not doing right and how can I fix it?
Any help would be appreciated!