3

在http://bl.ocks.org/d3noob/5193723的基础上，我尝试在地图上添加线串。

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

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 的简单“线条”对象并在 svg 上绘制，我可以控制放大/缩小时线条粗细的行为。使用墨卡托变换投影线会创建一个路径对象，控制起来非常棘手，我无法处理它。一种方法可能是重新渲染缩放操作的所有线条路径，但无法弄清楚如何有效地做到这一点。

4

1 回答 1

2

您可以将 vector-effect="non-scaling-stroke" 放在行中，但请注意，它不适用于 IE。

于 2014-12-16T13:12:17.197 回答