javascript - 如何一遍又一遍地迭代数组，同时将其每个值分配给 DOM 中的所有 svgs-6ren

javascript - 如何一遍又一遍地迭代数组，同时将其每个值分配给 DOM 中的所有 svgs

转载作者：行者123 更新时间：2023-12-02 14:23:54

26

4

抱歉，如果我的问题措辞不好。我是初学者，不知道事物的正确标签。

我正在使用 d3.js 制作日本 map ，并想为每个都道府县分配一种颜色。每个都道府县都有自己的 svg。我有一个要使用的颜色的十六进制值的数组，基本上想编写一个函数，将数组的第一种颜色分配给第一个 svg 的“填充”属性，将第二个颜色分配给第二个，依此类推。由于都道府县太多，颜色有时必须重复。我真的很难概念化如何解决这个问题，并且希望得到任何帮助!我的代码如下。我认为代码应该放在 javascript 的底部，我有 ?评论。

此外，此基础来自 Mike Bostock 的“让我们制作 map ”教程(如果有帮助的话)。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>



</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width = 960;
var height = 1160;

/* list of colors to iterate thru for prefecture color */
var colors = ["#8dd3c7", "#ffffb3", "#bebada", "#fb8072", "#80b1d3",
              "#fdb462", "#b3de69", "#fccde5", "#d9d9d9"];

var projection = d3.geo.mercator()
    .center([138.3, 39.2])
    .scale(1500);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("height", height)
    .attr("width", width);

/* draws the map. try to make a loop in here which uses the data id of
    the prefectures to uses the color list above to differentiate pref*/
d3.json("japanv2.json", function(error, japan) {
  svg.selectAll(".prefecture")
      .data(topojson.feature(japan, japan.objects.prefectures).features)
    .enter().append("path")
      .attr("class", function (d) { return "prefecture " + d.id; })
      .attr("d", path)
/*?*/ .attr("fill", 
      }
});


</script>
</body>
</html>

最佳答案

将其放入属性中:

.attr("fill", function(d,i){
    return colors[i%colors.length]
});

这段代码有什么作用？

首先，function(d,i) 中的 i 返回每个路径的索引。所以，如果你这样做:

.attr("fill", function(d,i){
    console.log(i);
    return colors[i%colors.length];
});

您将在控制台上看到一堆数字。假设您有 200 条路径，i 的范围为 0 到 199。

现在是模运算符:

x % y

它返回 remainder该部门的。因此，假设您的 colors 是一个包含 9 种颜色的数组，则:

i % colors.length

将返回此序列:

0, 1, 2, 3, 4, 5, 6, 7, 8, 0, 1, 2, 3, 4, 5, 6, 7, 8, 0, 1 etc

您可以使用它来获取颜色值。

PS:在一张 map 中，任何 map ，我们只需要 4 colours以避免任何两个具有相同颜色的区域有共同的边框! (难以置信，我知道......)

关于javascript - 如何一遍又一遍地迭代数组，同时将其每个值分配给 DOM 中的所有 svgs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38449461/

26

4

0

文章推荐： cakephp - 从 cakePHP 中的 Controller 输出超链接

文章推荐： javascript - 未捕获类型错误 : (//some function) not a function

jquery .each 迭代
如果您有超过 1 个具有相同类名的(动态)文本框，并使用 jquery 循环遍历每个所述文本框，您是否可以假设每次选择文本框的顺序都是相同的？示例: 文本框 1 值 = 1文本框 2 值 = 2文本
Python 迭代
有人知道为什么这段代码无法顺利运行吗？它似乎不喜欢使用yield关键字进行迭代:我正在尝试从任何级别的列表或字典中挖掘所有数字(对列表特别感兴趣)。在第二次迭代中，它找到 [2,3] 但无法依次打印
PHPExcel动态单元格生成-迭代
我关于从 mysql 数据库导出数据并将其保存到 Excel 文件(多表)的创建脚本。我需要让细胞动态基因化。该脚本正确地显示了标题，但数据集为空。当我“回显”$value 变量时，我检查了数据是否存
Python 迭代？
我正在尝试在 Python 中运行模拟，由此我绘制了一个数组的随机游走图，给定了两个变量参数的设定水平。但是，我遇到了一个问题，我不确定如何迭代以便生成 250 个不同的随机数以插入公式。例如我已经
jquery .each 迭代
我是学习 jquery 的新手，所以如果这是一个相对简单的问题，我深表歉意。我有一个 ID 为 ChartstoDisplay 的 asp.net 复选框列表。我正在尝试创建 jquery 来根据是否
定义有效案例的算法/迭代
我正在尝试根据在任意数量的部分中所做的选择找出生成有效案例列表的最佳方法。也许它不是真正的算法，而只是关于如何有效迭代的建议，但对我来说这似乎是一个算法问题。如果我错了，请纠正我。实现实际上是在 Ja
scapy - DNSRR 迭代
如果我使用 sr1 为 www.google.com 发送 DNSQR，我会收到几个 DNSRR(s) 作为回复，例如(使用 ans[DNSRR].show() 完成): ###[ DNS Resou
集合字段上的 JPA 迭代
假设有这样一个实体类 @Entity public class User { ... public Collection followers; ... } 假设用户有成千上万的用户关注者。我想分页..
jquery - 如何摆脱 .each() 迭代
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Nested jQuery.each() - continue/break 这是我的代码: var steps =
字典上的 F# 迭代
我刚从 F# 开始，我想遍历字典，获取键和值。所以在 C# 中，我会说: IDictionary resultSet = test.GetResults; foreach (DictionaryEn
c++ - 迭代 ifstream
我知道已经有很多关于如何迭代 ifstream 的答案，但没有一个真正帮助我找到解决方案。我的问题是:我有一个包含多行数据的txt文件。 txt 文件的第一行告诉我其余数据是如何组成的。例如这是我的
javascript - 迭代 If 语句
我有 12 个情态动词。我想将每个模态的 .modal__content 高度与 viewport 高度进行比较，并且如果特定模态 .modal__content 高度 vh addClass("c
if 语句中的 javascript 迭代
在此JSFiddle (问题代码被注释掉)第一次单击空单元格会在隐藏输入中设置一个值，并将单元格的背景颜色设置为绿色。单击第二个空表格单元格会设置另一个隐藏输入的值，并将第二个单元格的背景颜色更改为红
java - 如何访问存储在单链表节点中的对象的特定变量(迭代)
这是一个非常具体的问题，我似乎找不到任何特别有帮助的内容。我有一个单链表(不是一个实现的链表，这是我能找到的全部)，其中节点存储一个 Student 对象。每个 Student 对象都有变量，尽管我在
delphi - 迭代 IHTMLElementCollection
有没有办法迭代 IHTMLElementCollection？比如 var e : IHTMLLinkElement; elementCollection:IHTMLElementCollect
java - 迭代 HashMap ？
我正在尝试用 Java 取得高分。基本上我想要一个 HashMap 来保存 double 值(因此索引从最高的 double 值开始，这样我更容易对高分进行排序)，然后第二个值将是客户端对象，如下所示
sas - 限制 %do %while 迭代
我想在宏函数中运行 while/until 循环，并限制其最大迭代次数。我找到了如何在“通常”sas 中执行此操作: data dataset; do i=1 to 10 until(con
Java - 迭代 HashMap ？
Iterator iterator = plugin.inreview.keySet().iterator(); while (iterator.hasNext()) { Player key
lambda - 序言:迭代
晚上好我有一个简单的问题，我警告你我是序言的新手。假设有三个相同大小的列表，每个列表仅包含 1、0 或 -1。我想验证对于所有 i，在三个列表的第 i 个元素中，只有一个非零。此代码针对固定的 i
recursion - 方案尾递归/迭代
我在 scheme 中构建了一个递归函数，它将在某些输入上重复给定函数 f, n 次。 (define (recursive-repeated f n) (cond ((zero? n) iden

首页

博学

6Ren·AI

商城

javascript - 如何一遍又一遍地迭代数组，同时将其每个值分配给 DOM 中的所有 svgs