8

コードは次のとおりです。 http://jsfiddle.net/fJAwW/

これは私が興味を持っているものです:

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

データ変数 lineData があり、これをパスに追加します

.attr("d", line(lineData))

トランジション セクションの場合:

  .transition()
    .duration(2000)

私は次のようなことをしたいと思います

  .transition()
    .duration(function(d) {
      return d.x;
    })

ここで、d は私のデータ ポイントの 1 つです。

データ構造とそれらが d3.js でどのように相互作用するかを理解するのに問題があるので、助けていただければ幸いです。

4

2 に答える 2

4

興味深い点の 1 つは、データが属性ではなく、属性にd3格納されていることです。パスは、パスに関するデータが実際に保存される場所ではないという点で特別です。これを回避することは可能ですが、 、、およびを使用した標準のデータ パターンを使用することを強くお勧めします。d__data__d3.data().enter().append()

実際にデータを入力することはなく、__data__は空であり、その結果、dを使用すると未定義になります.duration(function(d) {})。

一般に、そのような関数を渡す場合、変数自体は問題ではありません。最初の変数は常に選択のために割り当てられ__data__、2 番目の変数は常にインデックスです。

おそらく、更新パターンの最も良い例は、Mike Bostock によるこのブロックです。また、行き詰まった場合に役立つ API の情報や、散布図の作成方法に関する約 100 億のチュートリアルもあり、すべて同じことを言っています。

を使用.data()してパスにデータを配置し、次.duration()のように関数 in でアクセスできます。

path.data([{'duration':1000}])
    .transition()
    .duration(function(d){return d.duration})
于 2013-07-24T20:33:16.873 に答える