私は、それぞれ異なる期間を持つ多数の D3期間ヒストグラムを使用しています。各バーが表す時間範囲の開始時間を、各バーの HTML 内の div id に結び付けたいと思います。この情報は、jQuery を介してアクセスされます。
たとえば、00:10 にバーがあるとします。バーの div に「00:10」を追加したいと思います。
私が理解できないのは、これらの時間を把握する方法です。これを行う方法に関する提案はありますか?
私は、それぞれ異なる期間を持つ多数の D3期間ヒストグラムを使用しています。各バーが表す時間範囲の開始時間を、各バーの HTML 内の div id に結び付けたいと思います。この情報は、jQuery を介してアクセスされます。
たとえば、00:10 にバーがあるとします。バーの div に「00:10」を追加したいと思います。
私が理解できないのは、これらの時間を把握する方法です。これを行う方法に関する提案はありますか?
属性を追加するにはselection.attr()
、たとえば次のようにします。
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); })
.attr("data-time", function(d){return formatMinutes(d.x)})
ただし、単にクリックで API にアクセスしたい場合は、d3 を調べてくださいselection.on()
。
bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); })
.on("click", function(d){
accessAPI(formatMinutes(d.x))
})
例えば。http://jsfiddle.net/3saQW/
d3.js がデータをバインドする方法について学習することをお勧めします。jQuery が不要な場合もあります。これは良いチュートリアル シリーズです: http://alignedleft.com/tutorials/d3/binding-data/