Question

（抱歉我的英语水平不好）嗨，我第一次使用D3与秘银js。地图还可以，但我有省份颜色的问题，它来自'd'属性来获取省的id。属性是未定义的，我不明白什么是'd'。秘密是问题吗？是否还有另一种获得'd'属性的方法？

controller.map = function(el){
    var width = 1160;
    var height = 960;
    var scale = 10000;
    var offset = [width / 2, height / 2];
    var center = [0, 50.64];
    var rotate = [-4.668, 0];
    var parallels = [51.74, 49.34];

    var projection = d3.geo.albers()
        .center(center)
        .rotate(rotate)
        .parallels(parallels)
        .scale(scale)
        .translate(offset)
    ;
    var path = d3.geo.path()
        .projection(projection)
    ;
    var svg = d3.select(el).append("svg")
        .attr("width",width)
        .attr("height",height)
    ;
    d3.json("belprov.json",function(error,be){
        if (error) return console.error(error);

        var bounds  = path.bounds(topojson.feature(be, be.objects.subunits));
        var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
        var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
        scale   = (hscale < vscale) ? hscale : vscale;
        offset  = [width - (bounds[0][0] + bounds[1][0])/2,
            height - (bounds[0][1] + bounds[1][1])/2];
        var centroid = d3.geo.centroid(topojson.feature(be, be.objects.subunits));
        center = [0, centroid[1]];
        rotate = [-centroid[0],0];
        projection = d3.geo.albers()
            .center(center)
            .rotate(rotate)
            .parallels(parallels)
            .scale(scale)
            .translate(offset);

        svg.selectAll(".province")
            .data(topojson.feature(be, be.objects.provinces).features)
            .enter().append("path")
            .attr("class", function(d) { return "province " + d.id })
            .attr("d", path)
        ;
    })
};

Answer 1

你可以做这样的事情来为不同的路径着色：

//make a color scale
var color20 = d3.scale.category20();
//your code as you doing


//on making paths do 
svg.selectAll(".province")
            .data(topojson.feature(be, be.objects.provinces).features)
            .enter().append("path")
            .attr("class", function(d) { return "province " + d.id })
            .style("fill", function(d){return color(d.id);})//do this to color path based on id.
            .attr("d", path)

Answer 2

路径对象中的"d"属性定义了路径必须通过的点的连续坐标（它还指示路径是否应使用贝塞尔曲线，直线等）。请参阅some documentation here。

注意：在d3中，d通常用作匿名函数的参数，表示当前绑定到当前元素的数据。所以两者完全不同。

在这里，你的行

.attr("d", path)

应该看起来更像

.attr("d", function(d){return d.path})

即，在数据元素中取字段path。

D3地图，'d'属性

2 个答案: