D3.js 转换未按预期工作答案

【问题标题】：D3.js transition not working as intendedD3.js 转换未按预期工作
【发布时间】：2016-03-23 19:46:43
【问题描述】：

我有 2 个具有不同对象的数组，例如 {x1: 10, x2: 20, y1: 10, y2: 20} 是线的坐标，我希望 SVG 从我的第一个数组过渡到第二个数组，但是它“种类”是这样做的，但最终它看起来不像我的最终数组。

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/

编辑：滚动查看过渡。

【问题讨论】：

标签： javascript arrays d3.js svg transition

【解决方案1】：

恐怕这就是你的数据产生的结果。这是一个刚刚编辑 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})

工作方式类似:)

【讨论】：