nvd3.jsを使用して、時間の経過とともに計算した評価を表示する折れ線グラフを作成しています。個々のデータポイント(評価)に関する詳細情報があり、グラフ上の各データポイントを、その特定のデータポイントに関する詳細情報を含む一意のページにリンクさせたいと考えています。
例:グラフの最初のデータポイント(x:1345457533、y:-0.0126262626263)にカーソルを合わせ、それをクリックして特定のページ(http://www.example.com/)に移動できるようにします。 info?id = 1)は、その評価またはデータポイントに関する詳細情報を提供します。各データポイントには、リンクしたい一意のIDと一意のURLがあります。
グラフの生成に使用しているコードは次のとおりです。
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.axisLabel('Time')
.tickFormat(d3.format('r'));
chart.yAxis
.axisLabel('Rating')
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var data = [ { x: 1345457533, y: -0.0126262626263 },
{ x: 1345457409, y: 0.0224089635854 },
{ x: 1345457288, y: 0.0270935960591 },
{ x: 1345457168, y: -0.0378151260504 },
{ x: 1345457046, y: -0.115789473684 } ]
return [
{
values: data,
key: "Sample1",
color: "#232066"
}
];
}
HTML:
<div id="chart">
<svg></svg>
</div>
そして、これが実際の例です。