我正在尝试扩展 Mike Bostock 的 Let's Make a Map 中给出的简单示例。允许根据国家/地区名称是否出现在列表中来为 map 中的国家/地区着色。
如果我定义了一个列表，如何将苏格兰和威尔士设置为绿色，将其他国家设置为蓝色 var selected_countries = ["SCT", "WLS"] ？
以下代码适用于使用条件 if/else 语句仅对一个国家/地区(苏格兰)进行着色，但如何扩展它以更改变量 selected_countries 中列出的所有国家/地区的类别？我试过if(selected_countries.contains(d.id))...但这是行不通的，我猜范围界定是让我绊倒的原因。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.subunit.selected { fill: green; }
.subunit.not-selected { fill: grey; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 1160;
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(1200 * 5)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var selected_countries = ["SCT", "WLS"]
d3.json("uk.json", function(error, uk) {
svg.selectAll(".subunit")
.data(topojson.feature(uk, uk.objects.subunits).features)
.enter().append("path")
.attr("class", function(d) {
if (d.id == "SCT") {return "subunit selected"}
else {return "subunit not-selected"};
})
.attr("d", path);
});
</script>
最佳答案
有两种(至少)方法可以做到这一点:
有一个名为“蓝色”的变量或您希望其他国家/地区具有的任何颜色。然后使用
for loop遍历列表中的所有元素。在for loop的每次迭代中，做一个比较陈述来检查你的d.id == <current element in list>是否或不。像这样的东西:var color = 'blue'; // or subunit not-selected for (var i=0; i<lengthOf(selected_countries); i++) { if (d.id == selected_countries[i]) color = 'green'; // or subunit selected } return color;您可以使用indexOf()方法，当传递的参数不在列表中时，该方法返回“-1”。
((selected_countries.indexOf(d.id) == -1) ? return blue : return green);
关于javascript - 在 d3 中使用列表和 if/else 的颜色图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29832994/