Change "fill" of each path according to the color that is in an array

1

I'm doing some tests and I'm generating a map of Brazil with all the municipalities and I'm creating an array that will have the following structure:

var arr = [];

arr['São Paulo'] = 'red';
arr['Altamira'] = 'black';

The code I currently have is

 //Width and height
            var w = 1280;
            var h = 1000;
            //Define map projection
            var projection = d3.geo.mercator()
                                   .translate([w, 100])
                                   .scale([900]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            var tooltip = d3.select('body').append('div')
            .attr('class', 'hidden tooltip');

            //Load in GeoJSON data
            d3.json("meujson.json", function(json) {

                var arr = [];

                arr['Altamira'] = 'red';

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "steelblue")
                   .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });

                    tooltip.classed('hidden', false)
                        .attr('style', 'left:' + (mouse[0] + 15) +
                                'px; top:' + (mouse[1] - 35) + 'px')
                        .html(d.properties.Name);
                })
                .on('mouseout', function() {
                    tooltip.classed('hidden', true);
                });

                svg.select("path").

            });

It mounts the map right, but as I said, I want each municipality to have a color and it currently applies the color steelblue on the entire map. What I want to do is put the color in each municipality according to the array with the name of the municipality = color. I'm using d3.js

    
asked by anonymous 10.10.2016 / 21:16

0 answers