改变彩虹虫的颜色

时间:2017-05-31 09:10:49

标签: javascript css d3.js

我使用Mike Bostock的Rainbow Worm作为我项目的一部分。 https://bl.ocks.org/mbostock/4165404

我正在尝试改变蠕虫的颜色,因为它将代表项目中的风速。着色由此函数描述:

var path = svg.selectAll("path")
.data(quad(points))
.enter().append("path")
.style("fill", function(d) { return d3.hsl(z(d[1].value), 1, .5); })
.style("stroke", "#000");

如果我用“颜色”替换功能(d),蠕虫将是单色的。 如何让蠕虫部分被着色为红色 - >白色 - >>红色 - >白色 - >红色 - >白色等等?

1 个答案:

答案 0 :(得分:2)

使用索引(第二个参数)和remainder operator

.style("fill", function(d,i) { return i%2 ? "red" : "white" })

这就是这个片段的作用:

第二个参数,这里名为i,是每个数据的索引,从0到data.length - 1

然后,使用余数运算符...

i % 2

......我们会得到一系列零和一些:

010101010101010101...

在JavaScript中(以及我所知道的所有语言)0都是假的,第三个运算符将返回" white"和"红色"交替进行。

这是bl.ocks:http://bl.ocks.org/anonymous/fd5c1e6644d742e43c737ff4a17f96ff