Question

我有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/

编辑：滚动查看转换。

Answer 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})

以类似方式工作：）

D3.js过渡不按预期工作

1 个答案: