D3.js 转换未按预期工作

Question

我有 2 个数组，其中包含不同的对象，例如 {x1: 10, x2: 20, y1: 10, y2: 20}，它们是线的坐标，我希望 SVG 从我的第一个数组过渡到第二个数组，然而它 "kind" 做到了，但最后它看起来不像我的最终数组。

if($percentageComplete<=25&&$percentageComplete>00)
  {
    var index =0;
var index2=0;
circle.data(projectMt).transition()
 .attr("y1", function (d) {
  var actual = mainMt[i].y1;
  var cambio = d.y1;
  //console.log("Y1 "+mainMt[index].y1)
  //console.log("Actual: "+actual);
  //console.log("Cambio: "+cambio);
  index++;
  //console.log("Y1 ACTUANDO");
  //console.log(actual-(cambio*$percentageComplete)/25);
  return (cambio);

})
  .attr("y2", function (d) {
  var actual = mainMt[i].y2;
  var cambio = d.y2;
  //console.log("Y2 "+mainMt[index2].y2)
  //console.log("Actual: "+actual);
  //console.log("Cambio: "+cambio);
  index2++;
  //console.log("Y2 ACTUANDO");
  //console.log(actual-(cambio*$percentageComplete)/25);
  return (cambio);

});
  console.log(index+""+index2);
 }

我的第一个数组是mainMt，第二个数组是projectMt，我们只需要改变y，x并不重要。结果是一个看起来有点像预期的图形，但不完全是。

这是完整的代码： http://www.carshel.com/tramonte/

编辑：滚动查看过渡。

Answer 1

恐怕这就是你的数据产生的结果。这是一个 fiddle 只是编辑 y 坐标：https://jsfiddle.net/wasd3k5e/2/

x 和 y 坐标：https://jsfiddle.net/wasd3k5e/1/

所以即使它看起来不太好，那是因为您只更新了 y 坐标。这就是您的数据所显示的。

我编辑了你的过渡并添加了这个：

circle.transition(500)
     //.attr('x1',function(d,i){ return projectMt[i].x1})
     .attr('y1',function(d,i){ return projectMt[i].y1})
     //.attr('x2',function(d,i){ return projectMt[i].x2})
     .attr('y2',function(d,i){ return projectMt[i].y2})

工作方式类似:)

D3.js 转换未按预期工作

D3.js transition not working as intended

javascript

arrays

svg

transition

d3.js