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
javascript svg d3.js


source to share


No one has answered this question yet

Check out similar questions:

7728
How do I redirect to another web page?
7649
How does JavaScript blocking work?
7494
How can I remove a specific element from an array in JavaScript?
7432
How to check if a string contains a substring in JavaScript?
7428
How can I check if an element is hidden in jQuery?
5722
How can I remove a property from a JavaScript object?
5129
How do I return a response from an asynchronous call?
4829
How do I include a JavaScript file in another JavaScript file?
2329
How do I detect a click outside of an element?
2101
jQuery scroll to element



All Articles
Loading...
X
Show
Funny
Dev
Pics