1

これは、私が現在直面している問題の JSFiddleです。

基本的に、いくつかのバーを描画するために使用するオブジェクトの配列があります。配列を並べ替えた後、それに応じてバーのy位置を更新しようとしましたが、うまくいきません。

だから、これは私がバーを描くために使用するスケールです：

var yScale = d3.scale.ordinal()
    .domain(d3.range(0, numberOfBars))
    .rangeBands([0, numberOfBars * barHeight]);

したがって、3 つのバーがあり、バーの高さが 40 ピクセルの場合、0-3 => 0-120 ピクセルをマッピングしています。

y次に、このスケールを使用して正しい位置を返す関数があります。

var y = function(d, i) {
    return yScale(i);
};

このy関数を使用してバーを描画した後、データ配列を並べ替えて、バーを再描画しようとします。

barsContainer.selectAll('.bar')
    .data(chartData.users)
    .transition()
      .duration(750)
      .delay(delay)
      .attr('y', y); // Not working. I thought this would order the bars.
      //.attr('y', 120); // This works though. It moves all the bars to this y.

これは私が困惑しているところです。配列 (chartData.users) を並べ替えたので、バーはデータと「結合」されているため、バーyは配列内のデータの新しい位置に従って変更されるべきではありませんか?

4

2 に答える 2

1

それで、私は問題が何であるかを理解しました。オブジェクトの配列を並べ替えていたため、D3.js は、どの配列オブジェクトがどの DOM オブジェクトと一致したかを自分で判断できませんでした。そのため、オブジェクトを識別するためのキー関数を作成する必要がありました。

var key = function(d) { return d.id }

次に、data()このキー関数を使用して呼び出し、次に を呼び出すだけでよいorder()ため、DOM の順序は配列の順序と一致します。

barsContainer.selectAll('.bar')
  .data(chartData.users, key)
  .order()
  .transition()
    .delay(delay)
    .duration(750)
    .attr('y', y);

これが実際の JSFiddleです。

于 2013-11-16T13:18:28.810 に答える
0

あなたのフィドルはとても長いです。最小限に抑えて、その特定の点について助けを求めることをお勧めします.

たとえば、テストしてみてください

console.log(chartData.users)

chartData を宣言した直後。ソートされたものと同じように見えるため、ソートに問題があるわけではない可能性があります。自分でさらに作業を行ってから、より具体的で簡潔な質問をすると、おそらくより多くの回答が得られるでしょう。

D3頑張ってください！

于 2013-11-15T11:03:40.430 に答える