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.

        var text = g2.selectAll("text")

        var mark = g2.selectAll("image")

        var link = g.selectAll(".line_DEFAULT")


And I added a scaling anchor like this

var zoom = d3.behavior.zoom()
     .translate([0, 0])
     .scaleExtent([1, 8])
     .on("zoom", function(){

        //svg.selectAll("path")"stroke-width", 1.5 / d3.event.scale + "px");

        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 enter image description here

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


source to share

All Articles