问题
Good day,
Coder, I am new to d3 and json. i want to create a simple map projection that will identify the population of each country that was saved in csv file.
I already created the map projection and now i am stock for almost a week on how to fill the country based on the population on my csv file..
In that code below it can identified the highest or lowest population of the world by using the circle, but i dont like to use circle simply because it can overlap each other, all i want is to fill the country either green,blue or red red being the highest and green being the lowest.
here is my sample csv file
country, population,lat, lon PHILIPPINES,10, 13, 122 CANADA, 2000, 60, -95 JAPAN, 500, 36, 138 AFGHANISTAN, 200, 33, 65 CHINA, 2000, 35, 105
here is my code
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: silver;
}
div.tooltip {
position: absolute;
text-align: center;
width: 140px;
height: 45px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
z-index:50;
}
.overlay {
fill: none;
pointer-events: all;
}
.state {
fill: #aaa;
}
.county-border,
.state-border {
fill: none;
stroke: #fff;
stroke-linejoin: round;
stroke-linecap: round;
}
.frame {
stroke: #333;
fill: none;
pointer-events: all;
}
.feature {
stroke: #ccc;
}
</style>
<body>
<!--<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>-->
<script src="Script/d3.v3.min.js"></script>
<script src="Script/topojson/topojson.js"></script>
<script src="Script/queue-master/queue.min.js"></script>
<script>
// <script src="http://d3js.org/d3.v2.js"></script>
<div id="d"></div>
<script>
var MalwareCountry = [
// "Australia", "Algeria",
//"Brunei", "Cameroon",
"Canada", "Cyprus",
"Philippines", "Manila",
// "United States of America", "Washington D.C",
//"Mexico", "Mexico",
//"New Zealand",
//"Hong Kong",
//"India",
//"Indonesia",
"China","Beijng",
"Japan", "Tokyo",
"Afghanistan"
//"Singapore",
//"South Korea",
//"Taiwan",
//"Thailand",
//"Vietnam",
//"Austria",
//"Belgium",
//"France",
//"Germany",
//"Iran",
//"Ireland",
//"Israel",
//"Italy",
//"Luxembourg",
//"Netherlands",
//"Russia",
//"Saudi Arabia",
//"Spain",
//"Switzerland",
//"Turkey",
//"United Arab Emirates",
//"United Kingdom",
//"Albania",
//"Bosnia and Herzegowina",
//"Crotia",
//"Czech Republic",
//"Hungary",
//"Denmark",
//"Finland",
//"Iceland",
//"Macedonia",
//"Montenegro",
//"Norway",
//"Poland",
//"Romania",
//"Serbia",
//"Slovenia",
//"Slovakia",
//"Sweden",
//"Bulgaria",
//"Malaysia", "Mozambique"
];
var div = d3.select("div")
.append("div")
.attr("class", "tooltip")
.style("opacity", .1);
var coldomain = [50, 150, 350, 750, 1500]
var extcoldomain = [10, 50, 150, 350, 750, 1500]
var legendary_labels = ["< 50", "50+", "150+", "350+", "750+", "> 1500"]
var color = d3.scale.threshold()
// .domain(coldomain)
//.range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
var color = d3.scale.category20b()
function getColorForCountry(name){
if (MalwareCountry.indexOf(name) < 0) {
return "#FFFFFF";
//return "#bbb";
}else {
return color();
}
}
var margin = {
top: 0, right: 0,
bottom: 0, left: 0
},
width = 960 - margin.left - margin.right,
height = 480 - margin.top - margin.bottom;
var projection = d3.geo.equirectangular()
.center([0, 5])
.scale(150)
.translate([width / 2, height / 2])
.rotate([0, 0])
.precision(.9);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height, 10 * height])
.on("zoom", move);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
var feature = svg.append("g")
.selectAll(".feature");
svg.append("rect")
.attr("class", "frame")
.attr("width", width)
.attr("height", height);
d3.json("Script/topojson/examples/worldmap-100.json", function(data) {
feature = feature
.data(data.features)
.enter().append("path")
.attr("class", "feature")
.attr("d", path)
.style("fill", function (d) { return getColorForCountry(d.properties.name) });
});
var g = svg.append("g");
d3.csv("data/s.csv", function (error, data) {
var circle = g.selectAll("circle")
.data(feature)
.enter()
.append("circle")
.attr("cx", function (d) { return projection([d.lon, d.lat])[0]; })
.attr("cy", function (d) { return projection([d.lon, d.lat])[1]; })
.attr("r", function (d) { return Math.sqrt(d.population) / 2 })
.style("fill", function (d) {
if (d.population >= 500 && d.population <= 800) {
return "blue"
}
else if (d.population >= 800) {
return "red"
}
else {
return "green"
}
})
})
function move() {
projection.translate(d3.event.translate).scale(d3.event.scale);
feature.attr("d", path);
}
var legend = svg.selectAll("g.legend")
.data(extcoldomain)
.enter().append("g")
.attr("class", "legend");
var ls_w = 20, ls_h = 20;
legend.append("rect")
.attr("x", 20)
.attr("y", function (d, i) { return height - (i * ls_h) - 2 * ls_h; })
.attr("width", ls_w)
.attr("height", ls_h)
.style("fill", function (d, i) { return color(d); })
.style("opacity", 0.8);
legend.append("text")
.attr("x", 50)
.attr("y", function (d, i) { return height - (i * ls_h) - ls_h - 4; })
.text(function (d, i) { return legendary_labels[i]; });
</script>
is there any trick that can help me regarding this problem.
thanks
回答1:
From what I understand you want to colour different countries different colours. The easiest way to do that is to create a colour scale with on of the built in D3 colour scales, so replace this line:
var color = d3.scale.threshold()
with this
var color = d3.scale.category10()
The documentation can be found here
Then you just need to use this to style the appropriate country as in the last line. This grabs a colour from the scale based on the index (i).
feature = feature.data(data.features)
.enter().append("path")
.attr("class", "feature")
.attr("d", path)
.style("fill", function (d,i) { return color(i) });
回答2:
I think the last part should be the following (with return)
feature = feature.data(data.features)
.enter().append("path")
.attr("class", "feature")
.attr("d", path)
.style("fill", function (d,i) { return color(i) });
来源：https://stackoverflow.com/questions/19583797/path-fill-color-in-d3