(sorry for my english bad level) Hi I'm using D3 for the first time with mithril js. The map is ok but I have a problem with colors of provinces and it es from the 'd' attribute to get the id of provinces.The attribute is undefined and I don't understand what is 'd' exactly. is mithril the problem? is there an other way to get 'd' attribute?

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)
        ;
    })
};

(sorry for my english bad level) Hi I'm using D3 for the first time with mithril js. The map is ok but I have a problem with colors of provinces and it es from the 'd' attribute to get the id of provinces.The attribute is undefined and I don't understand what is 'd' exactly. is mithril the problem? is there an other way to get 'd' attribute?

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)
        ;
    })
};

• javascript
• d3.js

2 Answers 2

The "d" attribute in a path object defines the successive coordinates of the points through which the path has to go (it also gives indication about whether the path should use bezier curves, straight lines, etc.). See some documentation here.

Be careful: in d3, d is often used as a parameter for anonymous functions representing the data currently binded to the current element. So the two are pletely different things.

Here, your line

.attr("d", path)

should probably look more like

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

i.e., take the field path within the data elements.

You can do something like this to color diffrent paths:

//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)