どのように私のDOM内のすべてのsvgsにその値のそれぞれを割り当てる間、何度も何度も配列を反復処理することができます

申し訳ありませんが私の質問には言葉が悪いです。私は初心者であり、物事のための適切なラベルを知らない。どのように私のDOM内のすべてのsvgsにその値のそれぞれを割り当てる間、何度も何度も配列を反復処理することができます

私は日本の地図をd3.jsで作成しており、都道府県ごとに色を割り当てたいと考えています。都道府県はそれぞれ自分のsvgです。私は、使用したい色の16進数の配列を持っており、基本的に配列の最初の色を最初のsvgの「塗りつぶし」プロパティに、2番目の色を2番目に、などに割り当てる関数を記述したいと考えています。非常に多くの都道府県があるので、色はある時点で繰り返さなければならないでしょう。私はこれについてどうやって行くのかを概念化するのは難しい時が本当にあり、助けが大好きです！私のコードは以下の通りです。私はコードが私はどこにあるjavascriptの一番下に行かなければならないと思いますか？コメント。

また、マイク・ボストックの「地図を作ってみましょう」チュートリアルが参考になります。

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

出典

2016-07-19 Dan

は属性でこれを入れて：

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

このスニペットの機能は何ですか？

最初に、iのfunction(d,i)は、それぞれのパスのインデックスを返します。あなたがこれを行うならば、

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

あなたはコンソール上の数字に束を見るでしょう。あなたが持っている場合は、iは0〜199

今剰余演算子に行く、のは、200本のパスを言わせて：それは分裂のremainderを返し

x % y

。だから、あなたのcolorsは9色の配列であることを考えると、この：

i % colors.length

は、このシーケンスを返します：

あなたが colors値を取得するために使用することができます

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

。

PS：地図では、共通の境界線を持つ2つの領域を避けるために、4 coloursのみ必要です。（信じられない、私は知っている...）

出典

2016-07-19 05:15:03

私はモジュラス*演算子を*モジュロ*演算子に編集しました。これは正しい言葉です。時々除数は*モジュラス*と呼ばれますが、演算とその結果は一般に*モジュロ*と呼ばれます。私はまた、Microsoftの説明へのリンクをMDNに置き換えて、それが正しいと言いました。 – altocumulus

優秀、ありがとう！ –

ありがとう！それは非常に便利な説明です！ – Dan

以前はD3を使用したことはありませんでしたが、配列内の自分の場所を追跡することはそれほど悪くありません。

私は、あなたが配列内のどこにあるかを別の変数で記録しておくことから始めるでしょう。var colors行の下に設定することができます。

var currentColor = 0;

あなたは県内の色を変更しているときに、あなたが使用して配列内の現在の場所を参照することができます。

colors[currentColor]

あなたがあなたを更新したいと思う、ということやった後currentColor：

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

これはcurrentColor値+1をインクリメントして、最後の色が使用された後に0に戻ってそれをリセットします。そうすれば、都道府県が増えれば、最初の色で始めることができます。あなたのコードでは、より探し

UPDATE

、私は私の答えで述べたcolors[currentColor]はこのラインでコンマの後に行くだろうと思っています：

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

出典

2016-07-19 04:41:50 jypweb

どのように私のDOM内のすべてのsvgsにその値のそれぞれを割り当てる間、何度も何度も配列を反復処理することができます

答えて

関連する問題