グラフ内のすべてのd3.jsデータポイントへのユニークなリンクを追加

Question

nvd3.jsを使用して、私が時間とともに計算した評価を表示する折れ線グラフを作成しています。私は個々のデータポイント（評価）ごとにさらに多くの情報を持っており、グラフ上の各データポイントをその特定のデータポイントに関するより多くの情報を持つユニークなページにリンクさせたいと考えています。例えば

：私はグラフ（：1345457533、Y：X -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> 

そして、ここではworking exampleです。ここで

Answer 1

は、実用的なソリューションhttp://jsfiddle.net/66hAj/7/

$('#chart svg').on('click', function(e){ 
    var elem = $(e.target), 
     currentItem, currentUrl; 

    if(elem.parent('.nv-point-paths').length) { 
     currentItem = e.target.getAttribute('class').match(/\d+/)[0]; 
     currentUrl = _data[0].urls[ currentItem ]; 

     $('#log').text(currentUrl); 
     //window.location = currentUrl 
    } 
}) 

である私は、キャンバス上のクリックハンドラをバインドして、要素、グラフ上でクリックに基づいてデータを取得するためにjQueryを使用しました。

currentItemはあなたが現在クリックした項目に関連するURLを与える

currentUrl

をクリックし、現在のアイテムのIDを提供します。

グラフ上の各点をクリックすると、グラフの下のdivにURLの変更が表示されます。