Question

基于svg world map from wikipedia我需要计算每个国家的质心。 d3库支持centorid method for paths。在提供的svg文件中，包含每个国家/地区的路径坐标。例如德国：

我如何使用属性＆＃34; d＆＃34;用于计算D3语法中的质心的svg数据？我需要它来指出每个国家的质心。

Answer 1

您可以根据此example计算质心，取自this question。可能有一种更简单的方法，但在d3.js中使用它可能是这样的：

function area(pts) {
    var area=0;
    var nPts = pts.length;
    var j=nPts-1;
    var p1; var p2;

    for (var i=0;i<nPts;j=i++) {
        p1=pts[i]; p2=pts[j];
        area+=p1.x*p2.y;
        area-=p1.y*p2.x;
    }
    area/=2;
    return area;
};

function computeCentroid(pts) {
    var nPts = pts.length;
    var x=0; var y=0;
    var f;
    var j=nPts-1;
    var p1; var p2;

    for (var i=0;i<nPts;j=i++) {
        p1=pts[i]; p2=pts[j];
        f=p1.x*p2.y-p2.x*p1.y;
        x+=(p1.x+p2.x)*f;
        y+=(p1.y+p2.y)*f;
    }

    f=area(pts)*6;
    return [x/f,y/f];
};

var path = d3.geo.path().projection(projection);

var map = chartSvg.selectAll('path.feature')
    .data(mapFiltered);
map.enter().append('path')
    .attr('class', 'feature');
map.attr('d', function(d, i){
    var pathString = path(d,i);
    var pathStringTrimmed = pathString.substring(1, pathString.length-1);
    var pathArray = pathStringTrimmed.split('L').map(function(d, i){var xy = d.split(','); return {x: ~~xy[0], y: ~~xy[1]};});
    console.log(computeCentroid(pathArray));
    return path(d,i);})

编辑：

此示例从具有规范化路径的GeoJSON文件开始。在SVG中，您必须自己规范化路径，因为未填充normalizedPathSegList属性。例如，您可以使用Inkscape将其保存为pdf并将其重新导入SVG文件。 Here是一种通过javascript将所有相对路径转换为绝对路径的方法。

BTW，解析原始字符串的另一种方法是使用SVGPathSegList.getItem（）查询每个元素的SVGPathSegList。

但要真正使用d3为你加载，投影和找到质心，如果你从默认的GeoJSON世界地图开始，或者用你找到的另一个世界地图开始，就会容易得多。

Answer 2

您应该考虑使用Mike Bostock的库中的世界地图文件，因为d3示例将为这些投影和文件做好准备。根据示例，一些世界地图在这里： https://github.com/mbostock/topojson

我认为这会真正简化你的生活，你可以使用topojson编写类似的东西：

var svg = d3.select('#yourmap').append('svg');

var g = svg.append('g')
    .style(//some styling, like stroke-width);

var projection = //your projection
    .scale(//your scale)
    .translate(//your width/2, height/2)
var path = d3.geo.path()
    .projection(projection

//read in your json file...

var world = topojson.feature(world.objects.countries).features //guessing at a potential structure of your file

g.selectAll('circle')
        .data(world)
      .enter().append('circle')
        .attr('transform', function(d) { return 'translate(' + path.centroid(d) + ')'; })
        .attr('r', //whatever you want your radius to be, in pixels);

除非您使用维基百科SVG有特殊原因？

计算质心d3

2 个答案: