用一个数据数组中的函数输入（）语句到多个数组？ （添加多个渐变路径）

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））与track01。即

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

运行。现在，我有另一条路径，名为track02，如果我替换上面的track01，它将运行一条新路径。我被困在让他们两人都工作。我想知道是否有人修复了下面的代码工作的功能。

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在一起那样：

var data = track01.concat(track02); 

我创建一个捣鼓的例子：https://jsfiddle.net/7k0wqw7v/