0

一連の異なる基準 (配列として格納) に基づいてバーが並べ替えられる横棒グラフを作成しました。バーを並べ替えることができますが、できないように見えることは、y軸をチャートのバーに合わせて再描画または再並べ替えすることです。

これが現在のページです: ここにリンクの説明を入力してください

以下は、ラベルを書き、バーを並べ替えるためのコードです。

var yAxisLabelNames = d3.scale.ordinal()
                        .domain(dataset.map(function(d){
                            return d.name;}))
                        .rangeRoundBands([padding, h - padding], 0.05);

var yAxis = d3.svg.axis()
                     .scale(yAxisLabelNames)
                     .orient("left");

svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);

そして私のソート機能の1つ：

d3.select("#patchCompetition")
            .on("click", function(){
                svg.selectAll("rect.bars")
                    .sort(function(a, b){
                        return d3.ascending(a.values[4], b.values[4])
                    })
                    .transition()
                    .delay(function(d, i){
                        return i *50;
                    })
                    .duration(1000)
                    .attr("y", function(d, i) {
                        return yScale(i)
                    });

                svg.selectAll(".labels")
                    .sort(function(a, b){
                        return d3.ascending(a.values[4], b.values[4])
                    })
                    .transition()
                    .delay(function(d, i){
                        return i * 50;
                    })
                    .duration(1000)
                    .attr("text-anchor", "middle")
                    .attr("y", function(d, i) {
                        return yScale(i) +yScale.rangeBand() /2 +4;
                });

                svg.select(".y axis").call(yAxis);

            });
4

1 に答える 1

0

を使用selection.sortしてノードを再配置することは、おそらく最善の方法ではありません。通常は、データから始めて、そこから DOM 表現の流れに任せる方がよいでしょう。データを他のすべての表現のアンカーと考えると、チャート内のその後の状態変化を管理しやすくなります。たとえば、インデックス ベースの のような特別な処理は必要ありませんyScale。

各クリック ハンドラは次のことができます。

  1. データセット配列を並べ替えます。
  2. yScale設定ドメインをデータと同じ順序で名前に作成 (または変更)します。
  3. に設定yScaleしyAxisてレンダリングします。
  4. データセットをバーにバインドし、既に行っているようにスケーリングによって設定xおよび属性を設定します。y

現在のようにバーを浮かせたい場合は、キー関数をselection.data呼び出しに渡すことができます。キー (インデックスの既定のキー) を指定しない場合、棒はその場所にとどまり、表す名前が変わると、単に拡大または縮小します。

このアプローチでは、データセットを変更すると、ドキュメント内のさまざまな表現が変更されます。

于 2013-09-02T22:05:20.917 に答える