gpt4 book ai didi

javascript - 在 d3 中使用列表和 if/else 的颜色图

转载 作者:行者123 更新时间:2023-11-28 00:22:44 24 4
gpt4 key购买 nike

我正在尝试扩展 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>

最佳答案

有两种(至少)方法可以做到这一点:

  1. 有一个名为“蓝色”的变量或您希望其他国家/地区具有的任何颜色。然后使用 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;
  2. 您可以使用indexOf()方法,当传递的参数不在列表中时,该方法返回“-1”。

    ((selected_countries.indexOf(d.id) == -1) ? return blue : return green); 

关于javascript - 在 d3 中使用列表和 if/else 的颜色图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29832994/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com