1

クリックしたボタンから渡された変数を介してデータセットを変更しようとしています。

これまでに私が行っていることの例を次に示します: http://jsfiddle.net/earlybirdtechie/qmC9E/

d3.selectAll('button.decadeBtn')
    .on("click", function() {
        var currentDecadeName = $(this).attr('data-decade');
        console.log('currentDecadeName: '+ currentDecadeName); 
        svg.selectAll("rect.bars")
        .data(currentDecadeName, function(d) { return d.id })
        .transition()
        .duration(1499)
        .ease("bounce")
        .attr({
            height: function(d,i) {
                return d.value;
            }
        })

上記の jsFiddle の例では、いずれかのボタンをクリックすると、その 10 年のデータに基づいてバーが変化するはずです。ただし、コードは動的変数名ではなく、データの名前を想定しています。したがって、js コードの 43 行目に移動し、変数名 'currentDecadeName' を 'seventies' に置き換えると、いずれかのボタンがクリックされるとバーが 70 年代のデータに変わります。これを静的データ変数ではなく動的変数で動作させるにはどうすればよいですか?

この質問を google groups に投稿したとき、 map オブジェクトを使用するように言われましたが、私は初心者であり、 d3.map の仕組みがわかりません。

この状況で d3.map を使用する方法を誰かが明らかにしたり、マップオブジェクトが d3 でどのように機能するかについてのチュートリアルを教えてもらえますか?

ありがとう！

4

1 に答える 1

1

ソース コードを見ると、mapクラスは非常に単純に見えます。これは基本的にマップ/ハッシュ/辞書/オブジェクトに相当し、通常の JavaScript オブジェクトに似ており、便利な関数がいくつかあります。私は d3 にあまり詳しくないのでmap、ライブラリの他の部分とうまく統合できるように設計されているのかもしれません。

本質的に、あなたがしたいことは、名前 (文字列) から値 (データポイントの配列) へのある種の「マッピング」でデータを収集することです。実際に使用する必要はありませんd3.map。この場合、単純なオブジェクトで十分です。

簡単な JavaScript オブジェクトの例を次に示します。マッピングをスコープ内に保持する必要があるだけです。

var sixties = [ ... ];
var seventies = [ ... ];

// Create mapping as an object
var map = {
    sixties: sixties,
    seventies: seventies
}

...

d3.selectAll('button.decadeBtn')
.on("click", function() {
    var currentDecadeName = $(this).attr('data-decade');
    svg.selectAll("rect.bars")
    // Lookup the current decade name in the mapping
    .data(map[currentDecadeName], function(d) { return d.id })
...

そして、これは を使用して同じことを示すJsFiddled3.mapです。これは、.get()関数を使用して要素にアクセスします。

于 2013-03-03T19:02:25.040 に答える