D3.js 路径转换不起作用答案

【问题标题】：D3.js path transition not workingD3.js 路径转换不起作用
【发布时间】：2014-10-05 02:43:25
【问题描述】：

我想画一条路径，然后改变它的坐标。以下代码不起作用（网址：http://porwal.info/direct/d3demo/line.html）

$(document).ready(function() { startDrawing(); });

function startDrawing() {
   var data = [
   { x : 50, y : 50},
   { x : 80, y : 40},
   { x : 100, y : 500}
   ];

   var container = d3.select("body");

   var vis = container.append("svg:svg")
      .attr("width", 200)
      .attr("height", 200);

   var d3line = d3.svg.line()
      .x(function(d){return d.x;})
      .y(function(d){return d.y;});

   vis.append("svg:path")
      .attr("d", d3line(data))
      .style("stroke-width", 2)
      .style("stroke", "blue")
      .style("fill", "none");

   data = [
   { x : 50, y : 50},
   { x : 300, y : 10},
   { x : 100, y : 500}
   ];

vis.transition()
      .duration(500)
      .ease("linear")
      .attr("d", d3line(data));
};

结果是它只画了初始路径，然后什么都不做。

【问题讨论】：

标签： svg d3.js path transition

【解决方案1】：

您正在vis 上进行转换，这是一个包含svg 而不是path 元素的选择。它在 SVG 上正确设置了 d 属性，但这当然没有任何效果。如果您选择path 元素，它将正常工作。

vis.select("path").transition()...

完整的演示here。

【讨论】：

谢谢。愚蠢的我，我应该说！