2

私はあきらめます、私はそれを理解することができません。
で棒グラフを作成しようとしましたが、機能し3d.jsません。おそらく、複雑な連想配列を処理するのに十分な理解がありません。

私の配列は次の構造を持っています： 

{"January"=>{"fail"=>13, "success"=>6},  
 "February"=>{"success"=>10, "fail"=>4},  
 "March"=>{"success"=>9, "fail"=>13},  
 "April"=>{"success"=>16, "fail"=>5},   
 "May"=>{"fail"=>52, "success"=>23},   
 "June"=>{"fail"=>7, "success"=>2},   
 "July"=>{},  
 "August"=>{"fail"=>6, "success"=>3},  
 "September"=>{"success"=>54, "fail"=>59},   
 "October"=>{"success"=>48, "fail"=>78},  
 "November"=>{"fail"=>4, "success"=>6},  
 "December"=>{"fail"=>1, "success"=>0}}`

軸の表示が機能しました： ここに画像の説明を入力してください

名前を「通常の」配列に変換したため、コードは非常に見苦しく見えます。

monthsNames = new Array();
i = 0;
for (key in data) {
  monthsNames[i] = key;
  i++;
}

x.domain(monthsNames);
y.domain([0, 100]);

しかし、データの扱い方がわかりません。

私は次のようなことを試みました、svg.selectAll(".bar").data(d3.entries(data)) 私が推測する良い始まりは何ですか、しかし私は軸への接続を機能させることができません。

私が作成したいのbar-chartは、月をx軸とし、毎月2つのバー（それぞれ2色の1つのバー）を持つものです。1つは成功用、もう1つは失敗用です。

誰かがデータの処理方法を教えてもらえますか？前もって感謝します！

編集：

xとyをスケーリングする方法がわかりません。このコードを使用する場合：

var x = d3.scale.ordinal()
   .domain(monthsNames)
   .range([0, width]);

var y = d3.scale.linear()
   .domain([0,100])
   .range([0, height]);

そのときは何も表示されません。たとえばx（d.key）またはx（d.value.fail）を使用した後に評価する値を出力すると、それらは本当に奇妙な数値であり、場合によってはNaNでさえあります。

編集：

d3.selectAll(".barsuccess")
      .on('mouseover', function(d){
                    svg.append('text')
                    .attr("x", x(d.key))
                    .attr("y", y(d.value.success))
                    .text(d.value.success+"%")
                    .attr('class','success')
                    .style("font-size","0.7em")
                })
                .on('mouseout', function(d){
                    d3.selectAll(".success").remove()
                });  


d3.selectAll(".barfail")
          .on('mouseover', function(d){
                        svg.append('text')
                        .attr("x", x(d.key)+x.rangeBand()/2)
                        .attr("y", y(d.value.fail))
                        .text(d.value.fail+"%")
                        .attr('class','fail')
                        .style("font-size","0.7em")
                    })
                    .on('mouseout', function(d){
                        d3.selectAll(".fail").remove()
                    });
4

1 に答える 1

3

こことここで棒グラフのチュートリアルを確認してください。基本的に、必要なものはすべて揃っています。軸とデータ間の接続は、入力値（「3月」など）を出力座標（125など）にマップする関数です。あなたは（おそらく）これらの関数をを使用して作成しましd3.scale.*た。これで、同じ関数を使用してデータをSVGの座標にマッピングするだけです。

追加する必要のあるコードの基本構造は次のようになります。

svg.selectAll(".barfail").data(d3.entries(data))
   .enter().append("rect")
   .attr("class", "barfail")
   .attr("x", function(d) { x(d.key) })
   .attr("width", 10)
   .attr("y", function(d) { y(d.value.fail) })
   .attr("height", function(d) { y(d.value.fail) });

と同様ですsuccess。両方のタイプのバーのx軸に同じスケールを使用する場合は、バーが重ならないように、一方に一定のオフセットを追加します。CSSクラスで色などを設定できます。

于 2012-12-10T21:05:29.657 に答える