Thêm các liên kết duy nhất vào tất cả các điểm dữ liệu d3.js trong biểu đồ

Question

Tôi đang sử dụng nvd3.js để tạo biểu đồ đường hiển thị xếp hạng mà tôi đã tính theo thời gian. Tôi có thêm thông tin cho từng điểm dữ liệu riêng lẻ (xếp hạng) và muốn có mỗi điểm dữ liệu trên liên kết biểu đồ đến một trang duy nhất có thêm thông tin về điểm dữ liệu cụ thể đó.

Ví dụ: Tôi muốn di chuột qua điểm dữ liệu đầu tiên trên biểu đồ (x: 1345457533, y: -0.0126262626263) và nhấp vào nó để truy cập trang cụ thể (http: // www.example.com/info?id=1) cung cấp thêm thông tin về xếp hạng hoặc điểm dữ liệu đó. Mỗi điểm dữ liệu có một id duy nhất và url duy nhất mà tôi muốn liên kết đến.

Đây là mã mà tôi đang sử dụng để tạo ra các đồ thị:

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> 

Và đây là một working example.

Answer 1

Dưới đây là một giải pháp làm việc 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 
    } 
}) 

Tôi đã sử dụng jQuery để ràng buộc một handler nhấp chuột trên vải và sau đó nhận được các dữ liệu dựa trên các phần tử nhấp vào biểu đồ.

currentItem mang đến cho bạn id của mục hiện tại mà bạn nhấp vào

currentUrl cung cấp cho các url liên quan đến mục hiện nhấp vào.

Bạn có thể thấy thay đổi url trong div bên dưới biểu đồ khi bạn nhấp vào từng điểm trên biểu đồ.