1つのデータ配列から複数の配列への関数を持つEnter（）文？ （複数の勾配パスを追加する）

Question

私は、データのその参照部分を持つ入力関数の構文の周りに頭をラッピングする問題が少しあります。 私の最終目標は、マップ上に多数の勾配パスを描くことです。そして私はhttp://geoexamples.blogspot.com.au/2014/04/d3-map-styling-tutorial-iv-drawing.html（bl.ocks.org/rveciana/10668944に焦点を当てています）のコードに従っています。このコードは、bl.ocks.org/mbostock/4163057からグラデーション関数コードを取り出します。 私はコードを動作させましたが、私はそれを一連のパスに拡張しようとしています。

私の質問は、コードの下の部分に焦点を当て、私が思うに、次のとおりです。

svg.selectAll("path") 
    .data(quad(sample(line(track), 8))) 
.enter().append("path") 
    .style("fill", function(d) { return color(d.t); }) 
    .style("stroke", function(d) { return color(d.t); }) 
    .attr("d", function(d) { return lineJoin(d[0], d[1], d[2], d[3], trackWidth); }); 

は言うことができます、私は（）のサンプル（ライン（トラック）、8）クワッドを置き換えることができ、新たな道を作りましたである。私。

svg.selectAll("path") 
    .data(track01) 
.enter().append("path") 
.style("fill", function(d) { return color(d.t); }) 
.style("stroke", function(d) { return color(d.t); }) 
.attr("d", function(d) { return lineJoin(d[0], d[1], d[2], d[3], trackWidth); }); 

が実行されます。今、上記のtrack01を置き換えると、新しいパスを実行するtrack02という別のパスがあります。私は彼らの両方を働かせているところで立ち往生しています。私は、以下のコードを動作させるための関数を修正した人がいるのだろうかと思っていました。

svg.selectAll("path") 
    .data([track01,track02]) 
.enter().append("path") 
.style("fill", function(d) { return color(d.t); }) 
.style("stroke", function(d) { return color(d.t); }) 
.attr("d", function(d) { return lineJoin(d[0], d[1], d[2], d[3], trackWidth); }); 

私は複数のパスを追加するgroups.google.com/forum/#!topic/d3-js/hM5DpnxAtVIに記載されたものをエミュレートしようとしています。

Answer 1

あなたのデータが既に配列では、あなたがしなければならないものをそのように一緒にCONCATです：含まれていtrack01`変数を `何https://jsfiddle.net/7k0wqw7v/