D3 地图,'d' 属性

Min*_*dix 3 javascript d3.js

(抱歉我的英语水平不好)嗨,我第一次使用 D3 和 mithril 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)
        ;
    })
};
Run Code Online (Sandbox Code Playgroud)

tar*_*len 6

路径对象中的属性"d"定义路径必须经过的点的连续坐标(它还指示路径是否应使用贝塞尔曲线、直线等)。请参阅此处的一些文档

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

在这里,你的线

.attr("d", path)
Run Code Online (Sandbox Code Playgroud)

可能应该看起来更像

.attr("d", function(d){return d.path})
Run Code Online (Sandbox Code Playgroud)

path即,获取数据元素内的字段。