用d3js在地图上显示河流

时间:2014-03-11 12:29:23

标签: svg d3.js

我根据Natural Earth的数据构建了德国的svg地图。大部分工作都很好,包括省份,地名和湖泊。但是,在低比例地图上使用河流时,只会显示部分河流。放大时,整条河都可见。

代码的相关部分:

<style type="text/css">
     .river { stroke: cadetblue; 
              fill: none; 
              stroke-linejoin: round; 
              stroke-linecap: round; 
            }
</style>
var projection = d3.geo.mollweide()
    .center([10.4, 51.1])
    .scale(6300)
    .translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);

// [...]

var svg = d3.select("#wrapper").append("svg")
    .attr("width", width)
    .attr("height", height)

var map = svg.append("g")
    .attr("id", "map");

// [...]

d3.json("data/final.json", function(error, deu) {
    // [...]
    var rivers = topojson.feature(deu, deu.objects.rivers);
    // [...]
    map.append("path")
        .datum(rivers)
        .attr("d", path)
        .attr("stroke-width", "2")
        .attr("class" , "river");
    // [...]
}

0 个答案:

没有答案