1

D3 での遷移に関する問題に取り組んできました。次のコードを検討してください。

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

そしてsetTimeout、数秒後に次のように呼び出します。

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

2 番目の呼び出しでは、パスが正しく更新されますが、トランジションはアニメーション化されません。d2 番目の呼び出しで属性が更新されるときに遷移がないのはなぜですか?

パスが非常に複雑であることに注意してください。どちらの呼び出しでも、パスが実際に描画されるまでに顕著な遅延があります。おそらくそれはトランジションの欠如に関連していますか？

私は D3 を初めて使用しますが、トランジションについて読んだことがありますが、これが期待どおりに動作しない理由を理解できないようです。

アップデート

@Marjancekの回答に従って、2つの呼び出された関数に関する詳細を提供しています。

の定義は次の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});
};

そして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});
};

path は次のように定義されます ( projectionis d3.geo.albersUsa()):

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

目的は、2 回目の呼び出しで、ラインが 10 個の新しいデータ ポイントで延長されることです。

4

2 に答える 2

6

パスに同じ数のポイントがない場合、トランジションが期待どおりに機能しない可能性があります。.attrTween を試してください: http://github.com/mbostock/d3/wiki/Transitions#wiki-attrTween bl.ocks.orgに例がありますが、サイトが現在ダウンしているように見えるため、リンクできません。それ。

編集時に追加: 私が考えていた要点は次のとおりです: https://gist.github.com/mbostock/3916621 bl.ocks リンクは、サイトが戻ったときにhttp://bl.ocks.org/mbostock/3916621になります上。

于 2013-03-23T23:23:53.873 に答える