Dodaj unikalne linki do wszystkich punktów danych d3.js na wykresie

Question

Używam nvd3.js do utworzenia wykresu liniowego, który wyświetla oceny, które wyliczyłem w czasie. Mam więcej informacji dla każdego pojedynczego punktu danych (ocena) i chciałbym, aby każdy punkt danych na wykresie był linkiem do unikalnej strony zawierającej więcej informacji o tym konkretnym punkcie danych.

Na przykład: Chciałbym móc unoszą się nad pierwszym punktem danych na wykresie (x: 1345457533, y: -0,0126262626263) i kliknij na nią, aby przejść do konkretnej strony (http: // www.example.com/info?id=1), który dostarcza więcej informacji na temat tej oceny lub punktu danych. Każdy punkt danych ma unikalny identyfikator i niepowtarzalny adres URL, do którego chciałbym się połączyć.

Oto kod, który używam do generowania wykresu:

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> 

A oto working example.

Answer 1

Tutaj jest roztwór roboczy 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 
    } 
}) 

Użyłem jQuery powiązać obsługi kliknij na płótnie, a następnie uzyskać dane na podstawie elementu kliknięciu na wykresie.

currentItem daje id bieżącego elementu, który kliknął

currentUrl daje url związane z aktualnie klikniętego elementu.

Możesz zobaczyć zmianę adresu URL w dziale poniżej wykresu po kliknięciu każdego punktu na wykresie.