为什么我的d3路径没有过渡？

Question

我的代码如下所示（省略我正在使用的比例）：

// Nesting data attaching "name" as data key.
var dataNest = d3.nest()
  .key(function(d) { return d.name; })
  .entries(data);

// Defining what the transition for the path.
var baseTransition = d3.transition()
  .duration(1000)
  .ease(d3.easeLinear);

// Bind data to SVG (use name as key).
var state = svg2
  .selectAll(".line2")
  .data(dataNest, function(d, i) { return d.key; });

// Enter data join.
state.enter()
  .append("path")
  .attr("class", "line2");

// Set transition and define new path being transition to.
state.transition(baseTransition)
  .style("stroke", "#000")
  .style("fill", "none")
  .attr("id", function(d) { return 'tag'+d.key.replace(/\s+/g, ''); })
  .attr("d", function(d) { return line(d.values); });

state.exit().remove();

我主要关注this example，其中转换正在下拉列表的顶部进行。但是，虽然我上面的代码显示路径，但它不会在路径之间转换。我的方法有任何明显的缺陷吗？

编辑：我有一个更具体的例子，说明我想对this JSFiddle做些什么。我想从data过渡到data2，但代码会立即呈现data2。