How to constrain scaling to some svg element in d3.js
I Created SVG with D3.js and added 3 points. Points contain text and image.
And also the line connecting these points.
g.insert("g");
var text = g2.selectAll("text")
.data(formattedTopoData.features);
var mark = g2.selectAll("image")
.data(formattedTopoData.features);
var link = g.selectAll(".line_DEFAULT")
.data(formattedTopoData.links);
And I added a scaling anchor like this
var zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 8])
.on("zoom", function(){
//svg.selectAll("path")
g.style("stroke-width", 1.5 / d3.event.scale + "px");
//svg.selectAll("path").
g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");};
Now when I zoom in, 3 objects (line, text, image) become zoomed in.
I want to limit scaling of image and text.
Plz help. The image looks like this
I created a plunker: here I want to enlarge the map with text here. but I don't want the text to look big when zoomed in
+3
source to share
No one has answered this question yet
Check out similar questions: