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

Question

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

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

运行。现在，我有另一条路径，称为 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/

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

Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)

javascript

gradient

path

d3.js

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

Enter() statement with a function from one data array to multiple arrays? (Adding multiple Gradient Paths)

javascript

gradient

path

d3.js

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