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 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

+3


source to share





All Articles