3

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 の単純な「線」オブジェクトを使用して svg に描画すると、拡大/縮小時の線の太さの動作を制御できます。メルカトル変換を使用して線を投影すると、パス オブジェクトが作成されますが、これは制御が非常に難しく、私はそれを処理できません。1 つの方法は、ズーム アクションですべてのライン パスを再レンダリングすることですが、それを効率的に行う方法がわかりません。

4

1 に答える 1

2

行に vector-effect="non-scaling-stroke" を追加できますが、IE では機能しないことに注意してください。

于 2014-12-16T13:12:17.197 に答える