Extending paths in D3 with transition

问题

I've been grappling with issues relating to transitions in D3. Consider this code:

svg.selectAll("path")
  .data(data, key)
  .enter().append("path")
  .attr("d", someFunctionThatReturnsAPath);
});

And I call the following in a setTimeout a few seconds later:

svg.selectAll("path")
  .transition()
  .duration(2000)
  .attr("d", someFunctionThatReturnsADifferentPath);
});

The second call correctly updates the paths but doesn't animate the transition. Why is there no transition when the d attribute is updated in the second call?

Note that the paths are very complex. In both calls, there's a noticeable delay before the paths are actually drawn. Perhaps that's related to the lack of transition?

I'm new to D3, but I've read up on transitions and can't seem to understand why this doesn't behave as I expect it.

Update

Per @Marjancek's answer, I'm providing more details regarding the two called functions.

Here is the definition of someFunctionThatReturnsAPath:

function(d) {
  var coordinates = [];

  for (var i = d.track.length - 1; i >= 0; i--) {
    // We only care about the last 10 elements
    if (coordinates.length >= 10)
      break;
    coordinates.push(d.track[i]);
  }
  return path({type: "LineString", coordinates: coordinates});
};

And someFunctionThatReturnsADifferentPath:

function(d) {
  var coordinates = [];

  for (var i = d.track.length - 1; i >= 0; i--) {
    // We only care about the last 20 elements
    if (coordinates.length >= 20)
      break;
    coordinates.push(d.track[i]);
  }
  return path({type: "LineString", coordinates: coordinates});
};

where path is defined as follows (projection is d3.geo.albersUsa()):

var path = d3.geo.path()
  .projection(projection);

The objective is that on the second call, the line is extended with 10 newer data points.

回答1:

If your paths do not have the same number of points, the transitions might not work as expected. Try .attrTween: http://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween There is an example on bl.ocks.org but the site seems to be down at the moment so I can't link to it.

Added on edit: The gist I was thinking of was: https://gist.github.com/mbostock/3916621 the bl.ocks link will be http://bl.ocks.org/mbostock/3916621 when the site is back up.

回答2:

It is impossible to know without looking at your someFunctionThatReturnsADifferentPath; but I'm guessing that your Different function does not take into account interpolation, from the three parameters it received.

Read the transitions documentation: https://github.com/mbostock/d3/wiki/Transitions

来源：https://stackoverflow.com/questions/15588134/extending-paths-in-d3-with-transition

标签

d3.js

transitions