0

D3 で作成した並べ替え可能なヒート マップをここに示します: http://bl.ocks.org/umcrcooke/5703304

年 (列) をクリックすると、最初の並べ替え/トランジションはうまく機能しますが、その後のクリックはうまくいきますが、トランジションはありません。トラブルシューティングに苦労しています。以下に示すトランジションのコード:

列のテキストをクリックすると更新関数が実行されるように設定しました。 

.on("click", function(d,i) { return d3.transition().each(update(d));});

そして、更新機能の関連部分は次のとおりです。

function update(year) {

grid.selectAll('rect')
.transition()
.duration(2500)
.attr("y", function(d) { return (sortOrder[year].indexOf(d.Country))*cell.height; })

grid.selectAll(".cell_label")
.transition()
.duration(2500)
.attr("y", function(d) { return (sortOrder[year].indexOf(d.Country))*cell.height +      (cell.height-cell.border)/2; })

d3.selectAll(".row_label")
.sort(function(a, b) {
        return d3.ascending(+a[year], +b[year]);
      })
.transition()
.duration(2500) 
.attr("y", function(d, i) { return (i*cell.height) + (cell.height-cell.border)/2; });
}
4

1 に答える 1

0

ハンドラーで何をしようとしているのかわかりd3.transition().each()ませんが、必要ありません。変更:

.on("click", function(d,i) { update(d); });

問題を修正します。フィドルを参照してください: http://jsfiddle.net/nrabinowitz/Lk5Pw/

于 2013-07-25T19:34:38.833 に答える