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.
Comments
Post a Comment