2012-08-23 34 views
10

में सभी d3.js डेटा पॉइंट्स के लिए अनन्य लिंक जोड़ें, मैं लाइन ग्राफ बनाने के लिए nvd3.js का उपयोग कर रहा हूं जो रेटिंग के साथ मैंने गणना की है। मेरे पास प्रत्येक व्यक्तिगत डेटा पॉइंट (रेटिंग) के लिए अधिक जानकारी है और उस विशिष्ट डेटा बिंदु के बारे में अधिक जानकारी के साथ एक अद्वितीय पृष्ठ पर ग्राफ़ लिंक पर प्रत्येक डेटा बिंदु रखना चाहते हैं।ग्राफ

उदाहरण के लिए: और एक विशेष पृष्ठ (http पर जाने के लिए उस पर क्लिक करें (-.0126262626263: +१३४५४५७५३३, वाई एक्स): मैं ग्राफ़ पर पहले डेटा बिंदु पर होवर करने में सक्षम होना चाहते हैं // www.example.com/info?id=1) जो उस रेटिंग या डेटा बिंदु के बारे में अधिक जानकारी प्रदान करता है। प्रत्येक डेटा पॉइंट में एक अद्वितीय आईडी और अद्वितीय यूआरएल होता है जिसे मैं लिंक करना चाहता हूं।

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" 
    } 
    ]; 
} 

एचटीएमएल:

<div id="chart"> 
    <svg></svg> 
</div> 

और यहाँ एक working example है

यहाँ कोड है कि मैं ग्राफ उत्पन्न करने के लिए उपयोग कर रहा हूँ है।

+1

[एसवीजी स्पेक] (http://www.w3.org/TR/SVG/linking.html) तत्वों के लिंक जोड़ने का वर्णन करता है। क्या आप कृपया jsfiddle पर एक पूरा उदाहरण प्रदान कर सकते हैं? मैंने आपका कोड काम करने की कोशिश की है, लेकिन मुझे कुछ याद आना चाहिए। –

+0

@ लार्सकोथथॉफ यहाँ एक [काम कर रहा jsfiddle] (http://jsfiddle.net/66hAj/) है। –

+3

धन्यवाद। मैंने इसे देखा है और दुर्भाग्यवश nvd3.js आपको निम्न स्तर की पहुंच प्रदान नहीं करता है जिसे आप चाहते हैं कि प्राप्त करने के लिए आपको चाहिए। आप बिंदु तत्व या पॉपअप प्राप्त नहीं कर सकते हैं। तो आप मूल रूप से 3 विकल्प हैं। आप जो चाहते हैं उसे करने के लिए आप nvd3.js को संशोधित कर सकते हैं। यह बहुत कठिन नहीं होना चाहिए। या आप इसे सादा d3.js में कर सकते हैं, जो आपको सब कुछ तक पहुंच प्रदान करेगा। यह या तो बहुत मुश्किल नहीं होना चाहिए। तीसरा, आप nvd3.js के काम के बाद तत्वों को मैन्युअल रूप से पहचानने का प्रयास कर सकते हैं और जो चाहते हैं उसे जोड़ सकते हैं। हैकी और सबसे अधिक संभावना मुश्किल, अनुशंसित नहीं है। –

उत्तर

5

यहाँ एक काम कर समाधान 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 पर क्लिक किया वर्तमान में क्लिक किया आइटम से संबंधित यूआरएल देता है की आईडी देता है।

आप चार्ट के नीचे div में यूआरएल परिवर्तन देख सकते हैं जब आप ग्राफ पर प्रत्येक बिंदु पर क्लिक करते हैं।

+1

बहुत बढ़िया, मुझे यह करने का विचार करना चाहिए था। जवाब के लिए धन्यवाद! –

+1

@ScottBartell de nada !! –