D3映射缩放事件以保持LineString宽度不变

Question

在http://bl.ocks.org/d3noob/5193723之上构建，我尝试在地图上添加Line String。

我在代码中做了一些修改：

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));

        });

在放大时，线条的厚度会相应增加。

由于我的应用程序有很多行，我希望行宽保持不变。有任何想法吗？ 如果我使用d3的简单＆＃39;行＆＃39;对象和在svg上绘制，我能够控制放大/缩小线条粗细的行为。使用mercator转换投影线会创建一个路径对象，这很难控制，我无法处理它。一种方法是在缩放操作上重新渲染所有线路径，但无法弄清楚如何有效地进行。

Answer 1

你可以把vector-effect =＆＃34; non-scaling-stroke＆＃34;在线，但要注意，它不会在IE上工作。