Question

我想画一条路，然后改变它的坐标。以下代码无效（网址：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));
};

结果是它只绘制了初始路径，然后什么也没做。

Answer 1

您正在vis转换，这是一个包含svg而非path元素的选择。它正确地在SVG上设置d属性，但当然不会产生任何影响。如果您选择path元素，它可以正常工作。

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

完整演示here。

D3.js路径转换不起作用

1 个答案: