same "stroke-width" attribute after zoming circle

[Vladimir Bacik]

Hi everybody,

could you tell me please, what should I insert into source code if I want to have same "stroke-with" attribute in circles on my web page?  My application is here: http://sodbtn.sk/json/json8/index2.html. When I zoom the map, the borders are with same stroke-width, and the same I wish append to the bubbles. I have tried some possibilities, but nothing was successfull. Thank you very much.

Best regards,

Vlado

var zoom = d3.behavior.zoom()

    .on("zoom",function() {

        

     

        g.attr("transform","translate("+ 

            d3.event.translate.join(",")+")scale("+d3.event.scale+")")

            .selectAll("path").style("stroke-width", 0.3 / zoom.scale() + "px" );

            

         g.selectAll("circle")

            .attr("d", path.projection(projection))

            

            .attr("r", function(e) { 

               return radius(e.<?php echo $ukazovatel ?>)/zoom.scale(); 

       })

        g.selectAll("path")  

            .attr("d", path.projection(projection));

                    

  });

 

svg.call(zoom)

[Joe Keohan]

Vladimir,

Just to clarify...you want to set the stroke-width of the circles to be the same stroke as the paths based on zoom.scale().  I'm still a bit new with mapping\zooming but have you tried adding the style attribute directly to your circles like so:

g.selectAll("circle").style("stroke-width", 0.3 / zoom.scale() + "px" );

Joe

[Vladimir Bacik]

Hi Joe,

thank you very much for your advice, it is very nice solutions for me. 

Best regards,

Vlado

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/AHxIJP79mW0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Adam]

Setting the vector-effect to non-scaling-stroke also works. Nice to have if you're performing extreme zooming transitions and don't want to set up a tween to keep the stroke width constant during the animation. 

http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke