CODEWITHSUNDEEP
svgd3.js
Maddy Chavda
Maddy Chavda

Reputation: 591

Transform <g> attribute on map of d3.js

I have prepared one example of map in d3.js. I wanted to implement zoom on map with and node(contains circle, smiley and text. as of now i putted circle and smiley) on map shows the city of different countries. When i zoom over map i could not able to transform the tag so smiley got misplace as per my logic. so how to transform only g tags on map. I don't want to transform shape(circle, images) inside tag.

My Jsfiddle link

var zoom = d3.behavior.zoom()
  .on("zoom",function() {
     g.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
     g.selectAll(".node")
      .attr("width", function(){
        var self = d3.select(this);
        var r = 28 / d3.event.scale;  // set radius according to scale
        self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2);  // scale stroke-width
        return r;
    });
      g.selectAll(".circle")
      .attr("r", function(){
        var self = d3.select(this);
        var r = 8 / d3.event.scale;  // set radius according to scale
        self.style("stroke-width", r < 4 ? (r < 2 ? 0.5 : 1) : 2);  // scale stroke-width
        return r;
    });
});

Please anybody help me to solve my issue.

Upvotes: 1

Views: 725

Answers (1)

musically_ut
musically_ut

Reputation: 34288

To do semantic zooming, one would need to adjust the width and height of the smiley faces as well as adjust the x and y locations since the adjustments will change relative to the width/height:

 g.selectAll(".node")
 .attr("x", function(d) { return (projection([d.lon, d.lat])[0]) - (8 / d3.event.scale); })
 .attr('y', function(d) { return (projection([d.lon, d.lat])[1]) - (8 / d3.event.scale); })
 .attr('width', function () { return 20 / d3.event.scale; })
 .attr('height', function () { return 20 / d3.event.scale; })

Demo: http://jsfiddle.net/ktee4dLp/

Upvotes: 1

Related Questions