Change "Fill" of each path according to the color in an array

Asked

Viewed 224 times

1

I am doing some tests and I am generating a map of Brazil with all municipalities and I am 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").

            });

He sets the map right, but as I said, I want each municipality to have a color and currently he applies the color steelblue across the map. What I want to do is put the color on each municipality according to the array with the municipality name = color. I’m using d3.js

  • Modifying that part .style("fill", "steelblue") and changing to get the color of the map does not work?

  • No, I’ve tried and nothing

  • You can do a jsFiddle with this? .attr("fill", "steelblue") should work well.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.