Javascript 如何在将数组的每个值分配给DOM中的所有SVG时，反复遍历数组_Javascript_D3.js_Svg_Maps

Javascript 如何在将数组的每个值分配给DOM中的所有SVG时，反复遍历数组

javascript d3.js svg maps

Javascript 如何在将数组的每个值分配给DOM中的所有SVG时，反复遍历数组,javascript,d3.js,svg,maps,Javascript,D3.js,Svg,Maps,对不起，如果我的问题措辞不当。我是个初学者，不知道事物的正确标签我正在使用d3.js制作一张日本地图，并希望为每个县指定一种颜色。各县都有自己的地方。我有一个十六进制的颜色数组，基本上我想写一个函数，将数组的第一种颜色分配给第一个svg的“fill”属性，将第二种颜色分配给第二种颜色，依此类推。这些颜色在某些时候必须重复，因为有太多的县。我真的有一个困难的时间概念如何去做这件事，并希望得到任何帮助！我的代码如下。我认为代码应该放在javascript的底部，我有？评论此外，如果有帮助的话，这

对不起，如果我的问题措辞不当。我是个初学者，不知道事物的正确标签

我正在使用d3.js制作一张日本地图，并希望为每个县指定一种颜色。各县都有自己的地方。我有一个十六进制的颜色数组，基本上我想写一个函数，将数组的第一种颜色分配给第一个svg的“fill”属性，将第二种颜色分配给第二种颜色，依此类推。这些颜色在某些时候必须重复，因为有太多的县。我真的有一个困难的时间概念如何去做这件事，并希望得到任何帮助！我的代码如下。我认为代码应该放在javascript的底部，我有？评论

此外，如果有帮助的话，这个基础来自Mike Bostock的“让我们制作地图”教程

<!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>


var宽度=960；
var高度=1160；
/*要迭代通过的颜色列表，以获得地区颜色*/
变量颜色=[“8dd3c7”、“ffffb3”、“贝巴达”、“fb8072”、“80b1d3”，
“fdb462”、“b3de69”、“fccde5”、“d9d9d9”]；
var projection=d3.geo.mercator（）
.中间（[138.3,39.2]）
.比例尺（1500）；
var path=d3.geo.path（）
.投影（投影）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“高度”，高度）
.attr（“宽度”，宽度）；
/*绘制地图。尝试在此处创建一个循环，该循环使用
县使用上面的颜色列表来区分pref*/
d3.json（“japanv2.json”），函数（错误，日本）{
svg.selectAll（“.aperty”）
.data（topojson.feature（japan，japan.objects.perfectures.features）
.enter（）.append（“路径”）
.attr（“类”，函数（d）{返回“地区”+d.id；}）
.attr（“d”，路径）
/*？*/.attr（“填充”，
}
});

我以前从未使用过D3，但跟踪您在阵列中的位置并不太糟糕

我首先用另一个变量跟踪数组中的位置，可能在

var colors

行下设置

var currentColor = 0;

然后，在更改地区颜色时，可以使用以下命令引用阵列中的当前位置：

colors[currentColor]

完成此操作后，您需要使用以下内容更新currentColor：

currentColor++;
if (currentColor == colors.length) {
    currentColor = 0;
}

这将增加currentColor值+1，然后在使用最后一种颜色后将其重置为0。这样，如果您有更多的县，您可以在开始颜色处使用start back

更新

仔细看一下你的代码，我想我在回答中提到的

colors[currentColor]

应该在这行的逗号后面：

/*?*/ .attr("fill",

我以前从未使用过D3，但跟踪您在阵列中的位置并不太糟糕

我首先用另一个变量跟踪数组中的位置，可能在

var colors

行下设置

var currentColor = 0;

然后，在更改地区颜色时，可以使用以下命令引用阵列中的当前位置：

colors[currentColor]

完成此操作后，您需要使用以下内容更新currentColor：

currentColor++;
if (currentColor == colors.length) {
    currentColor = 0;
}

这将增加currentColor值+1，然后在使用最后一种颜色后将其重置为0。这样，如果您有更多的县，您可以在开始颜色处使用start back

更新

仔细看一下你的代码，我想我在回答中提到的

colors[currentColor]

应该在这行的逗号后面：

/*?*/ .attr("fill",

将其放入属性中：

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

这段代码的作用是什么

首先，

函数（d，i）

中的

返回每个路径的索引。因此，如果执行此操作：

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

您将在控制台上看到一组数字。如果您有200条路径，

从0到199

现在是模运算符：

x % y

它返回除法的值。因此，假设您的

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：在地图中，任何地图，我们只需要避免任何两个颜色相同的区域有一个共同的边界！（难以置信，我知道…）

将此置于属性中：

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