向圖中的所有d3.js數據點添加唯一鏈接

我使用nvd3.js創建線圖，顯示我已計算的隨時間變化的評分。我對每個單獨的數據點（評級）都有更多的信息，並希望將圖表鏈接上的每個數據點都鏈接到一個獨特的頁面，並提供有關該特定數據點的更多信息。向圖中的所有d3.js數據點添加唯一鏈接

例如：我希望能夠將鼠標懸停在圖表上的第一個數據點（x：1345457533，Y：-0.0126262626263），並點擊它去一個特定的頁面（HTTP：// www.example.com/info?id=1）提供有關該評級或數據點的更多信息。每個數據點都有一個我想鏈接到的唯一ID和唯一網址。

這裏是我使用生成圖形代碼：

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。

來源

2012-08-23 Scott Bartell

[SVG規範]（http://www.w3.org/TR/SVG/linking.html）描述瞭如何添加鏈接到元素。你能提供一個jsfiddle的完整例子嗎？我試圖讓你的代碼工作，但我必須錯過一些東西。 –

@LarsKotthoff這是一個[工作jsfiddle]（http://jsfiddle.net/66hAj/）。 –

謝謝。我看了一下，不幸的是，nvd3.js並沒有給你提供你需要的低級訪問來實現你想要的功能。你無法獲得點元素或彈出窗口。所以你基本上有3個選擇。你可以修改nvd3.js來做你想做的事情。這不應該太難。或者你可以用簡單的d3.js來完成，它可以讓你訪問所有的東西。這也不應該太難。第三，你可以嘗試在nvd3.js完成它的工作並添加你想要的之後手動識別元素。哈克很可能很難，不推薦。 –

這裏是一個可行的解決方案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給你，你就

currentUrl點擊使與當前項目點擊該URL當前項目的ID。

當您單擊圖上的每個點時，您可以在圖表下方的div中看到url更改。

來源

2012-10-17 08:03:08

太棒了，我應該考慮這樣做。感謝你的回答！ –

@ScottBartell de nada !! –

向圖中的所有d3.js數據點添加唯一鏈接

回答

相關問題