javascript - 具有从一个数据数组到多个数组的函数的 Enter() 语句？ (添加多个渐变路径)

Question

我在思考引用部分数据的 enter 函数的语法时遇到了一些问题。我的最终目标是在 map 上绘制许多渐变路径。我一直在关注 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); });

比方说，我创建了一条新路径，可以将 quad(sample(line(track), 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

您的数据已经是一个数组，您要做的就是像这样将它们连接在一起:

var data = track01.concat(track02);

我为示例创建了一个 fiddle :https://jsfiddle.net/7k0wqw7v/