All geek questions in one place

Change color on map D3

I start in Js and I am trying to change the color of a specific country (function colorCountry ) by its identifier using D3.js. However, no matter what color I choose. As a result, the map highlighted in orange will always be displayed. What can I do to solve this problem?

Below is my code.

Thanks.

Here you can download the json file - https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json

<!DOCTYPE html> <meta charset="utf-8"> <style> body { background: #fcfcfa; } .stroke { fill: none; stroke: #000; stroke-width: 3px; } .fill { fill: #fff; } .graticule { fill: none; stroke: #777; stroke-width: .5px; stroke-opacity: .5; } .land { fill: #888; } .boundary { fill: none; stroke: #fff; stroke-width: .5px; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script> var countryCode = 840; //36: AUSTRALIA * 643: RUSSIA * 76: BRAZIL * 840: USA var width = 960, height = 580; var color = d3.scale.category10(); var projection = d3.geo.mercator() .scale(170) .translate([width / 2, height / 2]) .precision(.1); var path = d3.geo.path() .projection(projection); var graticule = d3.geo.graticule(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); svg.append("defs").append("path") .datum({type: "Sphere"}) .attr("id", "sphere") .attr("d", path); svg.append("use") .attr("class", "stroke") .attr("xlink:href", "#sphere"); svg.append("use") .attr("class", "fill") .attr("xlink:href", "#sphere"); svg.append("path") .datum(graticule) .attr("class", "graticule") .attr("d", path); d3.json("world-110m2.json", function(error, world) { if (error) throw error; var countries = topojson.feature(world, world.objects.countries).features, neighbors = topojson.neighbors(world.objects.countries.geometries); svg.selectAll(".country") .data(countries) .enter().insert("path", ".graticule") .attr("class", "country") .attr("d", path) .style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} }); svg.insert("path", ".graticule") .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; })) .attr("class", "boundary") .attr("d", path); console.log("value : " + countries[99].id); console.log("value : " + countries[12].id); console.log("value : " + countries[108].color); }); /*HERE*/ function colorCountry(country, countryId) { if (country.id == countryId) { return color(country.color = "#FF0000"); } } d3.select(self.frameElement).style("height", height + "px"); </script>
+5
source share
2 answers

I am not very familiar with d3, but this line seems to have too many if :

 .style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} });

it will be easier if you just do this:

 .style("fill", colorCountry);

and change your colorCountry function to

 function colorCountry(country) { if (country.id == countryCode) { return '#FF0000'; } else { return color(country.id); } }

or just get rid of the colorCountry function all together and use this

 .style("fill", function(d) { return (d.id == countryCode) ? '#FF0000' : color(d.id); });

But why don't you just update your JSON data?

0
source

Instead, in the tree, the path:

 .style("fill", function(d) { if (d.id == countryCode) { //there is no need for a condition. return color(colorCountry(d, d.id));//this is buggy, not clear what you trying to achieve. Color scale already return a color for the country id. } });

Do it

 .style("fill", function(d) {return color( d.id); });

The working code is here .

+1
source

Source: https://habr.com/ru/post/1247293/

More articles:


All Articles