html5 - D3 Map zoom event to keep LineString width constant -

building on top of http://bl.ocks.org/d3noob/5193723, tried add line string on map.

i made modifications in code :

var g1 = svg.append("g");  // load , display world d3.json("js/data/world-110m2.json", function(error, topology) {      var data = {type: "linestring", coordinates: [[102.0, 0.0], [3.0, 50.0]], count: 1};      g1.selectall(".route")             .data([data])             .enter()             .append("path")             .attr("class", "route")             .attr("d", path);      g.selectall("path")             .data(topojson.object(topology, topology.objects.countries)                     .geometries)             .enter()             .append("path")             .attr("d", path) });  // zoom , pan var zoom = d3.behavior.zoom()         .on("zoom",function() {             g.attr("transform","translate("+ d3.event.translate.join(",")+")scale("+d3.event.scale+")");             g.selectall("circle").attr("d", path.projection(projection));             g.selectall("path").attr("d", path.projection(projection));              g1.selectall(".route")                     .attr("transform","translate("+ d3.event.translate.join(",")+")scale("+d3.event.scale+")")                     .attr("d", path.projection(projection));          }); 

on zoom-in, line's thickness grows accordingly.

since application has lot of lines, want line width remain constant. ideas? if use d3's simple 'line' object , draw on svg, able control behavior of of line thickness on zoom in/out. projecting line using mercator transformation creates path object, quite tricky control , not able handle it. 1 way re-render line paths on zoom actions, not able figure out how efficiently.

you can put vector-effect="non-scaling-stroke" on line beware, won't work on ie.