1

私は D3.js プロジェクトに取り組んでおり、CSV ファイルから取得した学生のテスト結果のヒストグラムを表示しています。生のテスト スコアに加えて、CSV 内の各生徒に関するその他の人口統計データもいくつか持っています。ヒストグラムの特定のバーにマウス カーソルを合わせて、そのバーに表示されている学生に関する要約統計を表示できるようにしたいと考えています。

ヒストグラム バーを構成する配列に含まれるレコードの他の属性にアクセスすることは可能ですか? もしそうなら、誰かが私が検査できる例を知っていますか?

4

2 に答える 2

1

マウスオーバー イベント中に棒グラフの上にツールチップを表示できます。アイデアは、svg 領域の上に div フロートを作成することです。ツールチップ内にさまざまな情報を表示できます。ここで例を参照してください：

http://vida.io/documents/F3Ehr3qqeK28P22wn

ツールチップを表示/非表示にするコードのブロックは次のとおりです。

on("mouseover", function(d) {
    var bar_width = parseInt($(this).attr("width"), 10);
    var x = parseInt($(this).attr("x"), 10) + bar_width / 2 + 5;
    var y = parseInt($(this).attr("y"), 10) - 20;
    div.transition().duration(200).style("opacity", 1);
    // include info you want to display here:
    div.html(d[X_AXIS_COLUMN] + "<br/>" + Y_DATA_FORMAT(d[Y_AXIS_COLUMN])).style("left", x + "px").style("top", y + "px");
}).on("mouseout", function(d) {
    div.transition().duration(500).style("opacity", 0);
})
于 2013-09-19T22:34:16.107 に答える
1

ヒストグラムレイアウトを使用すると、ヒストグラム ビンの作成に使用されるスカラー以外のすべてがスローされます。

これを行うためのより良い方法があるかもしれませんが、他の生徒の属性は各バーに関連付けられていないため、元の生徒の配列を検索して、マウスオーバーされたビンにスコアがある生徒を探します。

.on('mouseover',function(d){ 
  console.log('data bound to bars ' + d); 
  var selectedStudents = values.filter(function(record){
            return d.x <= record.score && record.score < d.x + d.dx; });
  console.log(selectedStudents.map(function(record){ return record.name; }));
});

http://bl.ocks.org/1wheel/6568151

selectedStudents 配列は、名前の一覧表示以外の要約統計を生成するために使用できます。

于 2013-09-15T06:00:41.910 に答える