2017-05-31 3 views
3

マイクボストンのレインボーワームを私のプロジェクトの一部として使用しています。 https://bl.ocks.org/mbostock/4165404レインボーワームの色を変更する

私は、プロジェクトの風速を表すので、ワームの色を変更しようとしています。着色は、この関数によって記述される:私は「色」での機能(d)を交換する場合

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"); 

、ワームは、単一の色になります。 どのようにして、虫の部分を赤 - >白 - >赤 - >白 - >赤 - >白などのように着色することができますか?これは、このスニペットが何をするかである

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

答えて

2

は、インデックス(第2パラメータ)とremainder operatorを使用

二番目のパラメータ、ここではiという名前の、各データのインデックスです0からdata.length - 1になります。 JavaScriptの(と私は、すべての言語の場合と同様に

010101010101010101... 

次に、剰余演算子を使用して...

i % 2 

...我々は、0と1のシリーズを取得します0)が偽であることを認識している場合、3次演算子は "白"と "赤"を交互に返します。

ここにbl.ocksがあります。http://bl.ocks.org/anonymous/fd5c1e6644d742e43c737ff4a17f96ff

関連する問題