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?– Laerte
No, I’ve tried and nothing
– Alisson Acioli
You can do a jsFiddle with this?
.attr("fill", "steelblue")
should work well.– Sergio