CODEWITHSUNDEEP
d3.js
hsluoyz
hsluoyz

Reputation: 2889

How to keep the circle, stroke and font size when zooming in d3.js V4 layout?

I'm using d3.v4.js to draw my layout. And I need to limit the circle, stroke and font size to a maximized value when zooming in.

Here's an example that implements what I want, but it's in d3.v3.js.

http://bl.ocks.org/eyaler/10586116

I don't know how to implement this in d3.v4.js. Can anybody help me? Thanks.

Upvotes: 2

Views: 1212

Answers (1)

Zim
Zim

Reputation: 1483

One way I can think of is applying a "counter-scale" on the nodes when zooming.

When you zoom, a scale transformation is applied to the <g> wrapper node that is direct child of the svg node.

Let MAX_SCALE be the max scale you want to be applied on the nodes. Let currentScale the scale that's applied with the current zoom.

if (currentScale > MAX_SCALE), apply the "counter-scale" on the nodes (let's admit they are tagged with a "limit-scale" class):

d3.selectAll(".limit-scale").attr("transform", "scale(" + (MAX_SCALE/currentScale) + ")");

The same logic can be applied to stroke and font-size styles.

Upvotes: 3

Related Questions