D3 Map zoom event to maintain constant LineString width

Upstairs http://bl.ocks.org/d3noob/5193723 , I tried to add Line on the map.

I made some changes to the code:

var g1 = svg.append("g");

// load and display the 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 and 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));

        });

      

Output

When scaling, the line thickness grows accordingly. Zoomed-in

Since there are many lines in my application, I want the line width to remain constant. Any ideas? If I use a d3 simple "line" object and draw on an svg, I can control the behavior of the line thickness when zooming in / out. Projecting a line using a mercator transform creates a path object which is quite difficult to control and I cannot handle it. One way might be to re-render all linear paths on zoom actions, but fail to figure out how to do it efficiently.

+3


source to share


1 answer


You can put vector-effect = "non-scaling-stroke" on the line, but be careful, this won't work on IE.



+2


source







All Articles